Question

我尝试使用jquery将新的li元素添加到列表中。

在这个例子中它工作正常，但是当我想获得输入字段的值时使用.val（）不会创建一个li元素。

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

$(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());
    });

});

Answer 1

只需将代码更改为：

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

Answer 2

您要将文字附加到ol元素，该元素无效。您需要先创建li，然后设置其文字，然后将其附加到ol：

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

Example fiddle

Answer 3

试试这个

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

Working Demo

Answer 4

尝试使用此代码（更改代码，在ol中添加值）

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

Answer 5

请改用此代码

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

Answer 6

我建议如下：

$(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>

请注意，我还添加了placeholder属性，以便为填写<input />提供指导。

请注意，这也不会检查您要添加的元素的有效性;因此，它允许您或您的用户向<div>附加<ol>，无论该操作是否会产生无效的HTML。

可能需要进行调整，以便自动创建<li>，但内容由用户提供：

$(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>

参考文献：

appendTo()。
event.preventDefault()。

使用jquery将新元素设置到列表中

6 个答案: