Create html div with Js

Question

I am trying to create html code like this in js

This is html code how i want to get with javascript

   <div id="windwo">
      <div id="windowhead">
      </div>
  </div>

And this is Javascript code test

   var div = document.createElement('div');
        div.id = 'window';
        var div = document.createElement('div');
        div.id = 'windowhead';
        document.body.appendChild(div);
        document.body.appendChild(div);

And out put of javascript code is

<div id="windowhead"></div>

Someone can tell me which i mistake done ?

Kevin Boucher · Accepted Answer · 2015-05-14 17:44:55Z

2

You need two DIV variables and to append the second DIV to the first:

var div = document.createElement('div');
div.id = 'window';

var div2 = document.createElement('div');
div2.id = 'windowhead';
div.appendChild(div2);
document.body.appendChild(div);

You were essentially overwriting the first DIV with the second DIV.

answered May 14, 2015 at 17:44

Kevin Boucher

16.8k3 gold badges51 silver badges57 bronze badges

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

1 Comment

Phoenix Over a year ago

output is like this <div id="windwo"></div> <div id="windowhead"> </div>

Taplar · Accepted Answer · 2015-05-14 17:46:36Z

1

var $widow = $('<div>', { id: "widow" });
$widow.append( $('<div>', { id: "widowhead"}) );
$('body').append( $widow );

answered May 14, 2015 at 17:46

Taplar

25k4 gold badges24 silver badges36 bronze badges

Comments

Lal · Accepted Answer · 2015-05-14 17:44:26Z

0

You are appending the same element twice. so just Change your JS as follows

    var div1 = document.createElement('div');
    div1.id = 'window';
    var div2 = document.createElement('div');
    div2.id = 'windowhead';
    document.body.appendChild(div1);
    div1.appendChild(div2);

answered May 14, 2015 at 17:44

Lal

14.9k4 gold badges50 silver badges76 bronze badges

3 Comments

Kevin Boucher Over a year ago

I didn't down vote, but there is an additional issue with the append lines.

Phoenix Over a year ago

yes its working both but i didnt understand document.body.appendChild(div1); div1.appendChild(div2); this first is document.body...;and why second is div1.ap...; i am new in js if i get some explantion hmmm jai bhart

Lal Over a year ago

it means that first, you have to add div1 to the body, then add div2 to div1, since you want div2 to be inside div1..

Collectives™ on Stack Overflow

Create html div with Js

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related