CODEWITHSUNDEEP
javascriptjqueryhtml
ToyRobotic
ToyRobotic

Reputation: 597

set new element into list with jquery

i try to add a new li element into the list with jquery.

In this example it´s work fine, but when i want to get the value of a input field with .val() it´s not create a li element.

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append

my code: http://jsfiddle.net/k1acpxtp/

$(document).ready(function(){
    
    /* Click Event für Button "btn2" */
	$('#btn2').click(function(){
    /* Fügt ein Elemente in die Liste mit ".append" und 
    mit ".val()", wird das Value des Input Feldes ausgelesen */
    $("ol").append($("#test").val());
    });

});

Upvotes: 0

Views: 59

Answers (6)

David Thomas
David Thomas

Reputation: 253308

I'd suggest the following:

$(document).ready(function() {
  $('#btn2').click(function(e) {
    // preventing the default behaviour of the <button>:
    e.preventDefault();
    var entered = $('#test').val(),
      tag;
    // naive check to see if the user entered 'proper' HTML, eg:
    // <li>, <li>Some content</li> etc:
    if (entered.indexOf('<') === 0 && entered.lastIndexOf('>') === (entered.length - 1)) {
      tag = entered;
    } else {
      // otherwise, if they entered 'li', 'LI' etc, we
      // wrap the entered-value with the '<' and '>' to
      // form an HTML tag:
      tag = '<' + entered + '>';
    }
    // creating the element, then appending it to
    // the <ol>:
    $(tag).appendTo('ol');
  });

});

$(document).ready(function() {
  $('#btn2').click(function(e) {
    e.preventDefault();
    var entered = $('#test').val(),
      tag;
    if (entered.indexOf('<') === 0 && entered.lastIndexOf('>') === (entered.length - 1)) {
      tag = entered;
    } else {
      tag = '<' + entered + '>';
    }
    $(tag).appendTo('ol');
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol></ol>
<form method="post" action="create.html">New Track:
  <input type="text" id="test" name="track" placeholder="<tagName>" />
</form>
<button id="btn2">Add Element</button>

Note that I've also added a placeholder attribute to provide guidance for filling in the <input />.

Note that this also does not check validity of the elements you're adding; therefore it will allow you, or your users, to append a <div> to the <ol>, regardless of that action creating invalid HTML.

It may be worth adjusting so that the <li> is created automatically, but the content is supplied by the users:

$(document).ready(function() {
  $('#btn2').click(function(e) {
    e.preventDefault();
    var entered = $('#test').val();

    // creating an <li> element:
    $('<li>', {
      // taking the entered-value to set the element's
      // innerHTML:
      'html': entered
    }).appendTo('ol');
  });
});


$(document).ready(function() {
  $('#btn2').click(function(e) {
    e.preventDefault();
    var entered = $('#test').val();

    $('<li>', {
      'html': entered
    }).appendTo('ol');
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol></ol>
<form method="post" action="create.html">New Track:
  <input type="text" id="test" name="track" placeholder="new content" />
</form>
<button id="btn2">Add Element</button>

References:

Upvotes: 0

Manoj
Manoj

Reputation: 5071

Try this

$('#btn2').click(function(){
    $("ol").append('<li>'+$("#test").val()+'</li>');
});

Working Demo

Upvotes: 0

void
void

Reputation: 36703

Use this code instead

$("ol").append("<li>"+$("#test").val()+"</li>);

Upvotes: 0

Nishit Maheta
Nishit Maheta

Reputation: 6031

try with this code( change code where you append value in ol )

 $("ol").append("<li>"+$("#test").val()+"</li>);

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337550

You're appending text to an ol element, which is invalid. You need to first create the li, set its text then append that to the ol:

$('#btn2').click(function () {
    $('<li />', { text: $('#test').val() }).appendTo('ol');
});

Example fiddle

Upvotes: 0

Dhruv Ramani
Dhruv Ramani

Reputation: 2643

Just change the code to this :

$("ol").append("<li>"+$("#test").val()+"</li>);

Upvotes: 1

Related Questions