javascript - 创建段落节点时遇到问题

Question

我无法显示第二个文本节点

https://codepen.io/CusterMonroe/pen/QWLRqze

控制台没有错误。文本节点“文档”只是不会打印到屏幕上。想知道为什么。谢谢。

var newEm = document.createElement("em");
var text1 = document.createTextNode("Historic");

var newP = document.createElement("p");
var text2 = document.createTextNode(" Document");

newEm.appendChild(text1);
newP.appendChild(text2);
var phrase = newP.insertBefore(newEm,text2);

 document.getElementById("testBox").appendChild(phrase);

Answer 1

insertBefore 的返回值是插入的节点，因此您只插入 newEm。而是附加 newP。

var newEm = document.createElement("em");
var text1 = document.createTextNode("Historic");

var newP = document.createElement("p");
var text2 = document.createTextNode(" Document");

newEm.appendChild(text1);
newP.appendChild(text2);
var phrase = newP.insertBefore(newEm, text2);

document.body.appendChild(newP);

#testBox {
  border: 2px black solid;
  height: 300px;
  max-width: 75%;
  margin: 0 auto 25px;
  width: 600px;
}

<div="testBox"></div>

我可能会写得更简洁一些。

var newP = document.body.appendChild(document.createElement("p"));

newP.appendChild(document.createElement("em"))
  .appendChild(document.createTextNode("Historic"));

newP.appendChild(document.createTextNode(" Document"));

#testBox {
  border: 2px black solid;
  height: 300px;
  max-width: 75%;
  margin: 0 auto 25px;
  width: 600px;
}

<div="testBox"></div>