javascript - 将子元素追加到父元素中

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 = '/image/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>