JavaScript DOM操作：createTextNode()与element.textContent对比

嘿，这个问题问得挺实在的！咱们先把两种常见写法摆出来，再拆解背后的门道～

两种常见实现方式 #

第一种（少一行代码的“链式”写法）：

parentElement.appendChild(document.createElement('div'));

第二种（先存变量再追加）：

const newDiv = document.createElement('div');
parentElement.appendChild(newDiv);

什么时候选哪种？ #

其实核心区别不是代码行数，而是你是否需要后续操作这个新创建的元素：

• 如果只是创建元素并立刻追加到父节点，后续再也不需要碰它：第一种写法完全没问题，代码简洁清爽，性能和第二种没有任何差别——JS引擎会自动处理临时创建的元素引用，不会有内存浪费的问题。这种情况下选哪种，更多是个人编码风格的偏好。
• 如果后续需要对这个元素做操作（比如添加类名、绑定点击事件、修改innerHTML、调整样式）：那第二种写法是必须的！你得有一个变量引用指向这个元素，总不能再用querySelector去页面里找吧？既麻烦又容易出错（比如页面里有多个同类型元素时，可能选到错误的那个）。

额外的可读性考量 #

如果你的业务逻辑比较复杂，给新元素起个有意义的变量名（比如userInfoCard而不是newDiv），能大幅提升代码的可读性——其他开发者（包括未来的你）一眼就能知道这个元素的用途，维护起来更轻松。

比如：

const userInfoCard = document.createElement('div');
userInfoCard.classList.add('card');
userInfoCard.innerHTML = '<h3>张三</h3><p>前端开发</p>';
parentElement.appendChild(userInfoCard);

这种写法比链式写法清晰太多了。

总结 #

• 无后续操作需求：两种写法等价，看个人偏好；
• 有后续操作需求：必须选第二种存变量的方式；
• 复杂场景下：优先用变量存元素，提升代码可读性。

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