Question

第一个密码！

x = 6;

document.getElementById("btn").addEventListener("click", function() {
  var list = document.createElement("li");
  var apple = document.getElementById("our-list");

  list.appendChild(document.createTextNode("Something " + x++));
  apple.appendChild(list);
});

<body>
  <button id="btn">Click</button>

  <ul id="our-list">
    <li>Something 1</li>
    <li>Something 2</li>
    <li>Something 3</li>
    <li>Something 4</li>
    <li>Something 5</li>
  </ul>

  <script src="./javascript.js"></script>
</body>

测试代码！（是的，我知道它看起来很恶心，但这仅出于理解和测试目的。）

var x = 6;

document.getElementById("btn").addEventListener("click", function() {
  document.getElementById("our-list").appendChild(document.createElement("li").appendChild(document.createTextNode("Something " + x++)));
});

<body>
  <button id="btn">Click</button>

  <ul id="our-list">
    <li>Something 1</li>
    <li>Something 2</li>
    <li>Something 3</li>
    <li>Something 4</li>
    <li>Something 5</li>
  </ul>

  <script src="./javascript.js"></script>
</body>

这为什么不创建列表元素？似乎完全跳过了document.createElement("li")并立即附加了TextNode！

Answer 1

因为在第二个代码中，您要附加

的返回值。

document.createElement("li").appendChild(document.createTextNode("Something " + x++))

到document.getElementById("our-list")。

如果您查看appendChild的{{3}}，则此方法将返回附加的子节点。因此，当您

document.createElement("li")
.appendChild(document.createTextNode("Something " + x++))

您要添加到我们的列表的内容不是新创建的 li 元素，而是您打算放入该 li < / strong>节点。

Answer 2

您可以使用以下代码在不使用变量的情况下一行完成同一操作。希望对您有帮助。

document.getElementById("our-list").appendChild(document.createElement("li")).appendChild(document.createTextNode("Something " + x++));

几乎相同的代码，不同的输出。 JavaScript在这里有何不同之处？

2 个答案: