用 <li> 标签附加输入值答案

【问题标题】：Append with input value with <li> tag用 <li> 标签附加输入值
【发布时间】：2020-02-17 03:19:38
【问题描述】：

提前致谢。我正在尝试使用输入值附加一个列表。我可以使用预定义的字符串附加列表，也可以使用输入值附加到非列表项。但是我在组合这些时遇到了麻烦，它似乎添加了额外的列表项。这是我正在使用的代码：

    <ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<form>
    <div><textarea class="example-default-value" id="example-textarea" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>
    <div><input type="button" value="Append" onclick="example_append()" /></div>
</form>
<script language="javascript">
$('.example-default-value').each(function() {
    var default_value = this.value;
    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
        }
    });
    $(this).blur(function() {
        if(this.value == '') {
            this.value = default_value;
        }
    });
});
function example_append() {
    $('ol').append("<li>"+($('#example-textarea').val())+"<li>");
}
</script>

【问题讨论】：

我强烈建议您在转向 jQuery 之类的东西之前学习原生 DOM API。此外，您不应该使用onclick 内联事件侦听器，这是不好的做法。开始使用addEventListener。
@connexo 谢谢你的回答，我回去学习了一些更好的做法

标签： javascript jquery html

【解决方案1】：

哦，好的，我明白了——我正在使用两个 li 标签而不是一个 li 和一个 /li 结束标签！哦，天哪……需要更多的咖啡！

    function example_append() {
    $('ol').append("<li>"+($('#example-textarea').val())+"</li>");
}

【讨论】：

多喝咖啡总是好的:)

【解决方案2】：

如果您不在其他任何地方使用 jquery，您可以使用 javascript 来实现此功能，如下所示：

function example_append() {
let textInput = document.getElementById("example-textarea");
if(textInput.value !==""){
    let node = document.createElement("LI");  
    node.innerHTML = textInput.value;
    textInput.value="";
    document.getElementById("myList").appendChild(node);
  }else {
    alert("Enter something in textarea")
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol id="myList">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<form>
   <div>
    <textarea class="example-default-value" placeholder="Type here"
    id="example-textarea" style="width: 400px; height: 50px;"></textarea>
    </div>
    <div>
    <input type="button" value="Append"
    onclick="example_append()" />
   </div>
</form>

【讨论】：

【解决方案3】：

您必须在 example_append() 函数中使用 li 的结束标记。

$('ol').append("<li>"+($('#example-textarea').val())+"<li>");

到

$('ol').append("<li>"+($('#example-textarea').val())+"</li>");

【讨论】：