javascript - 如何让 div 元素包裹其他元素？（preudo 选择器存在于代码中）

Question

这是我试图达到的结构：

<div class="images">
  <div class="image">
   <div class="box">
      ::before
      <a><img></a>
   </div>
  </div>
</div>

但我得到：

<div class="images">
  <div class="image">
   <div class="box">::before</div>
      <a><img></a>       
  </div>
</div>

我尝试了很多选项，但我无法让 box div 包装链接和 img。我该怎么做？

 var image = document.createElement("div");
     image.className = "image";
 var images = document.createElement("div");
     images.className = "images";

 var foto = document.createElement("img"); 
 var a = document.createElement('a');

 a.appendChild(foto);

 var box = document.createElement('div');
     box.className = 'box';
     box.append(a)

     image.append(box);
     image.append(a);
     images.append(image);

标签： javascriptappendappendchild

Answer 1

按这个顺序做对我有用。

var images = document.createElement("div");
    images.className = "images";
var image = document.createElement("div");
    image.className = "image";
var box = document.createElement('div');
    box.className = 'box';
var foto = document.createElement("img"); 
var a = document.createElement('a');

a.appendChild(foto);
box.appendChild(a);
image.appendChild(box);
images.appendChild(image);

// this is to see it in dom:
document.body.appendChild(images);