JavaScript链式调用appendChild无法正常插入div元素问题求解

根本原因 #

Node.appendChild() 方法的返回值是被插入的子节点，而非调用该方法的父节点，这是代码不符合预期的核心原因。

你的代码实际执行流程：

• 首先成功创建了新的div节点，也成功把文本节点插入到了这个新div中
• 但你把新div.appendChild(文本节点)的返回值（也就是那个文本节点）直接传给了外层第一个div的appendChild方法
• 最终只有文本节点被插入到了目标位置，承载文本的新div没有被传入外层appendChild，自然不会出现在DOM树中。

你之前添加的括号仅保证了createElement优先执行，没有改变整个表达式最终返回文本节点的结果，所以不解决问题。

单条语句的可行实现 #

如果要保持单语句完成需求，可参考以下几种写法：

1. 利用立即执行函数返回新div节点，完全贴合你原本的原生JS实现逻辑：

function appendDiv() {
  document.getElementsByTagName('div')[0]
    .appendChild((() => {
      const div = document.createElement('div');
      div.appendChild(document.createTextNode('AppendedDiv'));
      return div;
    })());
}

2. 更简洁的Object.assign写法，直接给新div赋值文本内容：

function appendDiv() {
  document.getElementsByTagName('div')[0]
    .appendChild(Object.assign(document.createElement('div'), {textContent: 'AppendedDiv'}));
}

3. 如果使用jQuery实现，写法会更简单：

function appendDiv() {
  $('div:first').append($('<div>').text('AppendedDiv'));
}

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