createElement() + appendChild() -- DOM 方法答案

【问题标题】：createElement() + appendChild() -- DOM MethodscreateElement() + appendChild() -- DOM 方法
【发布时间】：2021-06-16 14:02:41
【问题描述】：

我正在尝试在“div”中创建一个“a”元素，并在该“a”元素中添加一个“img”图像，该图像已经存在于“div”元素中。我做了，但是，我怀疑因为下面的代码不起作用。

document.querySelectorAll(".card").forEach(function(div){
      
    div.appendChild(document.createElement("a"))
    div.querySelector("a").appendChild(div.querySelector(".image"))
        // OUPUT
        // <div class="card">
        //     <a>
        //         <img class="image" alt="image-1" id="image-1">
        //     </a>
        // </div>


     // NOT WORK
    div.appendChild(document.createElement("a").appendChild(div.querySelector(".image")))
        // OUTPUT
        // <div class="card">
        //     <img class="image" alt="image-1" id="image-1">
        // </div>
})

【问题讨论】：

请包含运行此 JavaScript 的 HTML。您可以使用 Stack Snippets（图标在编辑器工具栏中看起来像 <>）使其可运行。但是，您的第一组代码的输出似乎产生了您想要的输出。
appendChild 返回它附加的节点。所以div.appendChild(document.createElement("a").appendChild(…)) 没有按照你的意图将a 附加到div，因为你丢失了对那个的引用，当你一口气写完document.createElement("a").appendChild() 时——它返回了@ 987654328@ 元素，因此现在将其附加到您的 div 中。停止尝试将所有内容编写为单行，并使用变量来保留您以后可能仍需要的方法调用的返回值。
或者，如果您坚持编写难以阅读的内容，请使用大括号。 (div.appendChild(document.createElement("a")).appendChild(div.querySelector(".image")))。 (div.appendChild(document.createElement("a")) 返回新创建并附加的a，因此现在调用的appendChild 可以再次将图像附加到a 元素。
@CBroe 感谢您的帮助非常有用，我编写此代码是为了进行实验，所以我特地这样做了。

标签： javascript html dom appendchild createelement

【解决方案1】：

这是@CBroe 在他的第一条评论中的建议（使用多行）：

document.querySelectorAll(".card").forEach(function(div){
      
  const a = document.createElement("a");
  a.appendChild(div.querySelector(".image"));
  div.appendChild(a);

})

我担心这段代码会将.image 查询移动到every .card a 标记中。单个 DOM 对象只能有一个父对象，每个 appendChild(div.querySelector(".image")) 都会相应地更改父对象。

【讨论】：