时间戳

首页 > 解决方案 > createElement() + appendChild() -- DOM 方法

javascript - createElement() + appendChild() -- DOM 方法

问题描述

我正在尝试在“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>
})

标签： javascripthtmldomappendchildcreateelement

解决方案

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

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

})

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

推荐阅读