创建段落节点遇问题：第二个文本节点无法显示（附代码链接）

嘿，我一眼就瞅出问题所在啦！你最后只把被插入的<em>节点加到了页面DOM里，但存着“ Document”文本的<p>元素压根没被挂载到页面上，所以自然看不到这段内容咯。

具体原因拆解 #

你代码里的这两行是关键：

var phrase = newP.insertBefore(newEm,text2);
document.getElementById("testBox").appendChild(phrase);

insertBefore方法的返回值是被插入的那个节点（也就是newEm），所以你最后添加到testBox的只有<em>Historic</em>，而包含text2的newP还留在JavaScript内存里，完全没进入DOM树，浏览器当然不会渲染它。

修复方案 #

如果你想要的效果是 <p><em>Historic</em> Document</p>，那只需要把整个newP添加到testBox就行——因为你已经通过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);
newP.insertBefore(newEm, text2); // 这一步已经把newEm放到newP里了

// 直接添加整个newP到testBox
document.getElementById("testBox").appendChild(newP);

这样页面就能正常显示带强调效果的“Historic Document”啦～

内容的提问来源于stack exchange，提问作者Custer