首页 > 解决方案 > Javascript appendChild 不适用于 li 元素

问题描述

我的 JavaScript 代码工作到最后一个append. 我检查了警报消息。显示除最后一个之外的所有警报。所以我认为问题出在最后一个append. 有人可以帮忙吗?

var node = document.createElement("li");
var d0 = document.createElement("div");

var d1 = document.createElement("div");
var L1 = document.createElement("label");

d1.append(L1);

L1.innerHTML = "datah[key]";


var d2 = document.createElement("div");
var L2 = document.createElement("label");
d2.append(L2);

L2.innerHTML = "datah1[key]";

console.log("test1");
d0.append(d1);
d0.append(d2);

node.append(d0);
console.log("test2");

document.getElementById("speclist").appendChild(node);
// The following alert doesn't get printed
console.log("test3");
<div>
  <ul id="speclist">

  </ul>
</div>

标签: javascript

解决方案


最后一个附加问题没有问题是你没有在任何html中包装“test3”。你想显示test3然后你必须用node(li)包装它。

var node = document.createElement("li");
var d0 = document.createElement("div");

var d1 = document.createElement("div");
var L1 = document.createElement("label");

d1.append(L1);

L1.innerHTML = "datah[key]";


var d2 = document.createElement("div");
var L2 = document.createElement("label");
d2.append(L2);

L2.innerHTML = "datah1[key]";

alert("test1");
d0.append(d1);
d0.append(d2);

node.append(d0);
alert("test2");

//document.getElementById("speclist").appendChild(node);
// The following alert doesn't get printed
alert("test3");

  node.appendChild(document.createTextNode("test3"));
  document.getElementById("speclist").appendChild(node);
<div>
  <ul id="speclist">

  </ul>
</div>

还有一件事,当我运行您的代码时,它向我显示了 3 个警报 test1、test2 和 test3。


推荐阅读