使用jQuery将元素添加到单击时的有序列表中

Question

Entering the data in the input field and on clicking the 'Add New' button, element should be added in the list. Here, help me to find out the error

 $(document).ready(function() { var dataAdd = []; $("#addNew").click(function() { dataAdd.push($(this).data('#nameList')); console.log(data.length); }); }); 

 <ol id="nameList"> <li>aston</li> <li>baily</li> <li>clairne</li> </ol> <input type="text" id="data" placeholder="Enter data"> <button id="addNew">Add New</button> 

Answer 1

Seems like you need smth like:

$(document).ready(function () {
    $("#addNew").click(function(){
        $("#nameList").append("<li>" + $("#data").val() + "</li>");
    });
});

Answer 2

I don't understand what are you doing here...

dataAdd.push($(this).data('#nameList'));

You can access DOM elements with jQuery just referencing css-selector in brackets, like this $('css-selector')

That snippet does the trick:

 $(document).ready(function() { var dataAdd = []; $("#addNew").click(function() { var value = $('#data').val(); if(value) { dataAdd.push(value); $('#nameList').append('<li>' + value + '</li>'); $('#data').val(''); } console.log(dataAdd.length); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol id="nameList"> <li>aston</li> <li>baily</li> <li>clairne</li> </ol> <input type="text" id="data" placeholder="Enter data"> <button id="addNew">Add New</button> 

Answer 3

This works:

  var dataAdd = [];
  $("#addNew").click(function() {
        $('#nameList').append('<li>'+$('#data').val()+'</li>');
  });

Answer 4

You have to append the li with the value of input type text not the button.

 $(document).ready(function() { var dataAdd = []; $("#addNew").click(function() { dataAdd.push($('#data').val()); $('#nameList').append('<li>'+$('#data').val()+'</li>'); console.log(dataAdd.length); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol id="nameList"> <li>aston</li> <li>baily</li> <li>clairne</li> </ol> <input type="text" id="data" placeholder="Enter data"> <button id="addNew">Add New</button> 

Answer 5

 $(document).ready(function() { var dataAdd = []; $("#addNew").click(function() { var htm='<li>'+$('#data').val()+'</li>'; $("#nameList").append(htm); $('#data').val(''); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <ol id="nameList"> <li>aston</li> <li>baily</li> <li>clairne</li> </ol> <input type="text" id="data" placeholder="Enter data"> <button id="addNew">Add New</button>