我的列表功能在 javascript 中不起作用

Question

所以我写了这段代码来创建一个列表，然后在点击时向它附加一个输入。真的很简单。但问题是它不起作用，我不知道为什么这是代码：

function pushing() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("inp").value;
  var pushchild = document.createTextNode(inputValue);
  li.appendChild(pushchild);
}

sub.addEventListener("click", pushing);

id inp 是一个输入 id。谢谢

Answer 1

您的列表项永远不会附加到列表元素。

// Cache the elements,
// add the button listener,
// & focus on the input
const list = document.querySelector('ul');
const input = document.querySelector('#inp');
const sub = document.querySelector('#sub');
sub.addEventListener('click', pushing);
input.focus();

function pushing() {
  const li = document.createElement('li');
  const text = document.createTextNode(input.value);
  li.appendChild(text);

  // Adding the list item to the list element
  list.appendChild(li);
}

<input id="inp" />
<button id="sub">Click</button>
<ul></ul>

Answer 2

将此添加到函数的最后一行。将新创建的 li 元素附加到 ul。

document.querySelectorAll(‘ul’).appendChild(newCreatedLi);

我的列表功能在 javascript 中不起作用

my list function doesn't work in javascript

javascript

list

append

appendchild