JS中一行代码创建元素并添加文本节点的原理探究

先看你提到的那行精简代码：

const element_posts = document.getElementById("myPosts");

element_posts.appendChild(document.createElement("p").appendChild(document.createTextNode(data)).parentNode);

核心关键：DOM方法的返回值规则 #

要搞懂这行代码，得先记住**appendChild()方法的返回值是被添加的子节点，不是调用该方法的父元素**。

我们把这行链式调用拆解开看执行顺序：

1. 先执行document.createElement("p")：创建一个<p>元素节点，但此时它还没被挂载到DOM树里。
2. 接着调用这个<p>元素的appendChild(document.createTextNode(data))：把创建好的文本节点加到<p>元素里。这一步的返回值是那个文本节点，而不是<p>元素本身。
3. 最后调用.parentNode：从文本节点获取它的父节点——也就是我们一开始创建的<p>元素。
4. 把这个<p>元素传给element_posts.appendChild()，最终就把带文本的<p>加到目标容器里了。

为什么必须用.parentNode？ #

如果去掉.parentNode，代码就变成了：

element_posts.appendChild(document.createElement("p").appendChild(document.createTextNode(data)));

这时候appendChild接收的是前面那步返回的文本节点，相当于直接把文本节点加到element_posts里，自然就看不到<p>标签了——因为<p>元素根本没被添加到目标容器里，它只是临时创建出来承载了文本节点，但自己没被挂载，最后会被垃圾回收掉。

和常规代码的对比 #

常规代码是把每一步的节点都用变量存起来，逻辑更直观：

const element_posts = document.getElementById("myPosts");

const contentParagraph = document.createElement("p");
const contentTextNode = document.createTextNode(data);
contentParagraph.appendChild(contentTextNode);
element_posts.appendChild(contentParagraph);

本质上和一行代码做的是同一件事：先创建<p>，把文本加进去，再把<p>加到目标容器。一行代码只是利用DOM节点的parentNode属性，省去了变量声明，用链式调用完成所有操作。

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