How to create nested elements in JavaScript?

Question

Here's my HTML. I target to create elements in Javascript and insert it into div with the class "wrap" but didn't succeed.

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

I get

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

To clarify - you are attempting to create the example structure up top (wrap > shelf > shelf-background > base) but are getting the flat structure at the bottom? I'd recommend reading how appendChild and append actually work. — smashed-potatoes
– smashed-potatoes, Commented Feb 4, 2020 at 18:04

smashed-potatoes · Accepted Answer · 2020-02-04 18:11:13Z

1

Right now, you are appending base to the background, and then appending all of the elements to the wrap element at the top level. Also note, when you call shelfBackground.appendChild(base), it returns the appended child base which is why it is the last element in your output structure.

What you need to do is instead append the elements based to their respective parents, i.e.:

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

answered Feb 4, 2020 at 18:11

smashed-potatoes

2,2521 gold badge16 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lucien · Accepted Answer · 2020-02-04 18:13:38Z

1

Try this:

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

answered Feb 4, 2020 at 18:13

Lucien

136 bronze badges

Collectives™ on Stack Overflow

How to create nested elements in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related