Добавить с входным значением с тегом <li>

Question

Заранее спасибо. Я пытаюсь добавить список, используя входное значение. Я могу добавить список, используя предопределенную строку, и я могу добавить, используя входное значение к элементу не из списка. Но у меня возникают проблемы с их объединением, кажется, я добавляю дополнительные элементы списка. Это код, который я использую:

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

Answer 1

ОН Хорошо, я вижу - я использую два тега li вместо одного тега li и одного / li! О, дорогой ... требуется больше кофе !!

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

Answer 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>

Answer 3

Вы должны использовать тег закрытия для li в вашей функции example_append ().

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

до

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