动态添加的项目不会附加到列表中答案

【问题标题】：Dynamically added Item doesn't get appended the to the list动态添加的项目不会附加到列表中
【发布时间】：2020-08-13 15:55:49
【问题描述】：

我正在尝试根据输入值附加一个列表项。但是，不会附加列表项。我试图在不同的点使用脚本标签，但这无济于事。我错过了什么？

这是我的 HTML

<body>
<main>
    <div>
        <form>
            <input type="text" name="newtodo" id="newtodo" placeholder="New Todo...">
            <button type="submit" id="addtodo">+</button>
        </form>
        <div class="AddedTodo">
            <ul id="myList">

            </ul>
        </div>    
        <div>
            <p id="clearAll">Clear All</p>
        </div>
    </div>
</main>
</body>
<script type="text/javascript" src="script.js"></script>

这是我的 JavaScript。

document.getElementById("addtodo").onclick = function addItem() {
    var ul = document.getElementById("newtodo").value;
    var li = "<li>" + ul + "</li>";
    document.getElementById("myList").appendChild(li);
}

【问题讨论】：

appendChild 需要一个节点（例如，使用 createElement 创建）作为参数，而不是字符串。
@AlwaysHelping 嘿，接受你的回答。有效。但是，我的理解太基础了，在我理解你的代码之前我不得不用谷歌搜索很多！不过谢谢！
@boonie 不用担心 :) 我添加了官方文档的链接，因此您也可以参考它们（如果需要）。很高兴能帮到你。
@AlwaysHelping 您好，您的代码中的函数 (e) 是什么？ e 代表什么？
e 表示event 在任何被调用的函数或（点击事件）中都有自己的事件。你可以随意命名它。你甚至把你的名字写成这样：在function(boonie)和使用boonie.preventDefault()，它仍然可以工作。

标签： javascript html

【解决方案1】：

您需要使用createElement 函数来创建您的li 来执行items。然后使用 appendChild - 也考虑使用addEventListener

我还添加了clearAll 按钮的功能。这将使您从列表中清除所有待办事项items。

此外，由于您在 HTML 中使用 form，这意味着默认行为是重新加载页面。要阻止这种情况发生，请使用 preventDefault 方法。

现场演示：

var list = document.getElementById("myList")

//Add to do's
document.getElementById("addtodo").addEventListener('click', function(e) {
  e.preventDefault()
  var inputValue = document.getElementById("newtodo");
  var li = document.createElement('li')
  li.textContent = inputValue.value
  list.appendChild(li)
  inputValue.value = ''
}, false);


//Clear all
document.getElementById("clearAll").addEventListener('click', function(e) {
  e.preventDefault()
  list.innerHTML = ''
}, false);

<body>
  <main>
    <div>
      <form>
        <input type="text" name="newtodo" id="newtodo" placeholder="New Todo...">
        <button type="submit" id="addtodo">+</button>
      </form>
      <div class="AddedTodo">
        <ul id="myList">

        </ul>
      </div>
      <div>
        <button id="clearAll">Clear All</button>
      </div>
    </div>
  </main>
</body>

【讨论】：

【解决方案2】：

试试这个简单的解决方案...

myList.innerHTML+='<li>'+newtodo.value+'</li>';

【讨论】：

不是当你使用 +=

【解决方案3】：

按钮类型不应该是submit，应该是type="button"，并且易于使用innerHTML。

<body>
<main>
    <div>
        <form>
            <input type="text" name="newtodo" id="newtodo" placeholder="New Todo...">
            <button type="button" id="addtodo">+</button>
        </form>
        <div class="AddedTodo">
            <ul id="myList">

            </ul>
        </div>    
        <div>
            <p id="clearAll">Clear All</p>
        </div>
    </div>
</main>
</body>
<script type="text/javascript" src="script.js"></script>

document.getElementById("addtodo").onclick = function addItem() {

  const newtodo = document.getElementById("newtodo").value;

  const myList = document.getElementById("myList");

  myList.innerHTML += '<li>' + newtodo + '</li>';

}

【讨论】：

@AlwaysHelping with += 它将追加。
@AlwaysHelping 检查我的html 代码，当你使用type="button" 时它不会！

【解决方案4】：

这里有很多 todo liste 示例代码...
喜欢这个：How do I append more than one child element to a parent element Javascript

您错过了任何表单提交 => 发送数据并加载新页面（这里它重新加载同一页面）
你的按钮是一个提交，所以你必须跟踪提交事件，而不是按钮的点击事件 ...

const myForm = document.getElementById('my-form')
  ,   myList = document.getElementById('my-list')
  ;
myForm.onsubmit=e=>
  {
  e.preventDefault() // stop the form submit ( don't let him sending data to server, don't let a page quit and loading the same one)

  let todoText =  myForm.newtodo.value.trim()  // get the todo value without spaces before / after
  if (todoText!=='')
    {
    let liTodo = document.createElement('li')
    liTodo.textContent = todoText
    myList.appendChild(liTodo)
    myForm.newtodo.value = '' // cleaner
    }
  }

<form id="my-form">
  <input type="text" name="newtodo" placeholder="New Todo...">
  <button type="submit" >+</button>
</form>
<br>
<ul id="my-list"></ul>

【讨论】：