时间戳

首页 > 解决方案 > 几乎相同的代码，不同的输出。JavaScript 在这里有什么不同？

javascript - 几乎相同的代码，不同的输出。JavaScript 在这里有什么不同？

问题描述

第一个密码！

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 ！

标签： javascript

解决方案

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

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

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

如果您查看 的文档，appendChild此方法返回附加的子节点。因此，当你这样做

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

您附加到our-list的不是新创建的li元素，而是您打算在该li节点内的子注释。

推荐阅读