CODEWITHSUNDEEP
javascriptjqueryhtml
Phoenix
Phoenix

Reputation: 487

Create html div with Js

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 ?

Upvotes: 0

Views: 106

Answers (3)

Taplar
Taplar

Reputation: 24965

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

Upvotes: 1

Kevin Boucher
Kevin Boucher

Reputation: 16675

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.

Upvotes: 2

Lal
Lal

Reputation: 14810

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

Upvotes: 0

Related Questions