Как заставить элемент div обернуть другие элементы? (Preudo селекторы присутствуют в коде) - PullRequest
Новая
       30

Как заставить элемент div обернуть другие элементы? (Preudo селекторы присутствуют в коде)

0 голосов
/ 12 февраля 2020

Вот структура, к которой я пытаюсь добраться: 

<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>

Я перепробовал много вариантов, но не могу сделать, чтобы окно div обернуло ссылку и рис. Как я могу это сделать? 

 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);

Ответы [ 3 ]

1 голос
/ 12 февраля 2020

Вы должны использовать appendChild вместо append, чтобы элементы фактически добавлялись внутри друг к другу, а не после друг друга.

Кроме того, * 1007 не требуется *, поскольку a будет добавлено к image вместе с box: 

//creating the elements
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');
var box = document.createElement('div');
box.className = 'box';

//appending elements inside each other
box.appendChild(a); //appendChild so that the <a> tag is *inside* the div
a.appendChild(foto);
image.appendChild(box);
images.appendChild(image);

//finally, appending everything to the body (for this example)
document.body.appendChild(images);
1 голос
/ 12 февраля 2020

Вот вам go: 

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

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

newlink.append(foto);
box.append(newlink);

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



document.getElementsByTagName("body")[0].append(images);
1 голос
/ 12 февраля 2020

Выполнение в этом порядке сработало для меня. 

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);
...