How to append div tag dynamically in html using javascript/

Question

I am creating one div dynamically and want to add it inside another div.

           (js) var divtag = document.createElement("div");
                divtag.innerHTML = xmlhttp.responseText;//Ajax call working fine
                document.getElementById('con').appendChild(divtag);

html:

enter code here <div id="con"></div>

The the o/p I am getting from AJAX call is Ok, also i am able to view it in browser, but when I am doing a view source I am unable to see the div and its contents. It should come as :

enter code here <div id="con">
              <div>
           Contents added @ runtime
         </div>
          </div>

Can somebody suggest where I am going wrong?

stefita · Accepted Answer · 2009-10-12 09:27:08Z

2

You won't see the generated code in the browser by default, but you can use the Firefox extension Web Developer to view the code generated after executing js.

-- edit

also helpful extension for FF - FireBug.

answered Oct 12, 2009 at 9:27

stefita

1,7932 gold badges20 silver badges35 bronze badges

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

3 Comments

Wondering Over a year ago

yeah, that I have tried...its working..but cant see it in view source..probaly thats not possible.

stefita Over a year ago

Web Developer context menu -> View Source -> View Generated Source or FireBug -> HTML Tab

jerjer Over a year ago

try alerting the responseText and see if the the correct one, then check if there is no js error.

Glorfindel · Accepted Answer · 2021-03-27 17:53:26Z

1

Use firebug - the best firefox web development addon in my opinion.

With firebug you can inspect the DOM:

_{(source: mozilla.org)}

edited Mar 27, 2021 at 17:53

Glorfindel

22.8k13 gold badges97 silver badges124 bronze badges

answered Oct 12, 2009 at 9:28

wiifm

3,7981 gold badge24 silver badges24 bronze badges

Comments

Ramiz Uddin · Accepted Answer · 2009-10-12 09:39:40Z

Do you have "con" div loaded on our DOM?

var divtag = document.createElement("div");
divtag.innerHTML = xmlhttp.responseText;//Ajax call working fine
// See before adding a child, does it exist?
alert(document.getElementById('con'));
document.getElementById('con').appendChild(divtag);

I don't know where you having this code. As it is important that the DOM should be loaded before checking/assigning anything to an element. To avoid such a mistake:

function addEvent(obj, evType, fn){ 
 if (obj.addEventListener){ 
   obj.addEventListener(evType, fn, false); 
   return true; 
 } else if (obj.attachEvent){ 
   var r = obj.attachEvent("on"+evType, fn); 
   return r; 
 } else { 
   return false; 
 } 
}
addEvent(window, 'load', function() {
      var divtag = document.createElement("div");
      divtag.innerHTML = xmlhttp.responseText;//Ajax call working fine
      // See before adding a child, does it exist?
      alert(document.getElementById('con'));
      document.getElementById('con').appendChild(divtag);
});

Collectives™ on Stack Overflow

How to append div tag dynamically in html using javascript/

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related