Как создать вложенные элементы в JavaScript?

Question

Вот мой HTML. Я хочу создать элементы в Javascript и вставить их в div с классом "wrap", но это не удалось.

<div class="wrap">
 <div class="shelf">
   <div class="shelf-background">
     <div class="base">
     </div>
   </div>
 </div>
</div>


   var base = document.createElement('div');
   var shelfBackground = document.createElement('div');
   var wrap = document.querySelector(".wrap");
   var shelf = document.createElement('div');
   shelfBackground.className = "shelf-background";
   base.className = "base";
   shelf.className = "shelf";

   shelfBackground.appendChild(base);
   wrap.append(shelf, shelfBackground, shelfBackground.appendChild(base));

Я получаю

   <div class="wrap">
     <div class="shelf"></div>
        <div class="shelf-background"></div>
     <div class="base"></div>
   </div>

Answer 1

Попробуйте это:

var wrap = document.querySelector(".wrap");

var base = document.createElement('div');
var shelfBackground = document.createElement('div');
var shelf = document.createElement('div');

base.className = "base";
shelfBackground.className = "shelf-background";
shelf.className = "shelf";

shelfBackground.appendChild(base);
shelf.appendChild(shelfBackground);
wrap.appendChild(shelf);
document.appendChild(wrap);

Answer 2

Прямо сейчас вы добавляете базу к фону, а затем добавляете все элементы к элементу wrap на верхнем уровне. Также обратите внимание, что когда вы вызываете shelfBackground.appendChild(base), он возвращает присоединенный дочерний элемент base, поэтому он является последним элементом в вашей структуре вывода.

Вам нужно вместо этого добавить элементы на основе их соответствующие родители, то есть:

...
// Build the structure from the bottom up
shelfBackground.appendChild(base);  // shelf-background > base
shelf.appendChild(shelfBackground); // shelf > shelf-background > base
wrap.appendChild(shelf);            // wrap > shelf > shelf-background > base