Question

<div id = "a"></div>
<div id = "b"></div>
<div id = "ab"><div>

function addKids() 
{
    img1 = document.createElement("img");
    img1.src = // SOURCE1;
    document.getElementById("a").appendChild(a);

    img2 = document.createElement("img");
    img2.src = // SOURCE2;
    document.getElementById("b").appendChild(b);

    document.getElementById("ab").appendChild(a);
    document.getElementById("ab").appendChild(b);
}

这就是我想要的，基本上我想要div A中的img1，div B中的img 2，然后是div AB中的两个图像。如果我将代码删除到appendChildren到AB，则图像显示在它们各自的div中，但是一旦appendChildren存在，它们只出现在AB中。如何在没有太多额外编码的情况下正确显示每个div中的图像？

此外，更多图像将不断添加到div A和B.如何将两个div的最后一张图像添加到div AB？

谢谢！

Answer 1

不同的父母不能共享DOM元素，因为最后一个父AB将是图像a和b

的唯一父元素

另一种方法是使用函数cloneNode()

克隆这些图像

function addKids() {
  a = document.createElement("img");
  a.src = 'https://i.stack.imgur.com/G2FO1.jpg?s=48&g=1';
    document.getElementById("a").appendChild(a);

  b = document.createElement("img");
  b.src = 'https://lh3.googleusercontent.com/-w_IWeYU4ynw/AAAAAAAAAAI/AAAAAAAAAF0/Xbzx7yhjooQ/photo.jpg?sz=48';
    document.getElementById("b").appendChild(b);

  var ab = document.getElementById("ab");
  ab.appendChild(a.cloneNode());
  ab.appendChild(b.cloneNode());
}

addKids();

<div id="a">a</div>
<div id="b">b</div>
<div id="ab">ab
  <div>

在父级中追加子元素

1 个答案: