Creating Div into Div using JavaScript

Question

I have this code code.

It's work in jsfiddle but the problem when I test it in my file it's not working.

I have only displayed the first three lines created by html :

test h1

test h2

test p

(I test the code in different browsers and javascript is work but the same problem).

Code :

    var div2= document.createElement('div');  
    div2.className = "div2" ;
    var h1 = document.createElement('h1');
    h1.innerHTML= "test h1" ;
    var h2 = document.createElement('h2');
    h2.innerHTML= "test h2" ;
    var p = document.createElement('P');
    p.innerHTML= "p2" ;            
    div2.appendChild(h1);
    div2.appendChild(h2);
    div2.appendChild(p);
   document.getElementById('div1').appendChild(div2);

Thank you.

Like jsFiddle is, are you waiting for the document to load before attempting to append to div1? — Alex K.
– Alex K., Commented Nov 5, 2012 at 17:06
@Sushanth-- Just setting it to jQuery and/or Pure javascript isn't the fix for the issue... OP needs to run it after the DOM is ready. — Jason M. Batchelor
– Jason M. Batchelor, Commented Nov 5, 2012 at 17:14
@Sushanth-- Why does the framework need to be changed? That has nothing to do with it — Ian
– Ian, Commented Nov 5, 2012 at 17:15

earl3s · Accepted Answer · 2012-11-05 17:09:43Z

3

It's likely you are not waiting for the Document to load before running this code in your own application. Try wrapping your code in this block.

window.onload = function() {
    [your code here]
}

answered Nov 5, 2012 at 17:09

earl3s

2,3731 gold badge23 silver badges25 bronze badges

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

Comments

Jason M. Batchelor · Accepted Answer · 2012-11-05 17:13:16Z

The problem may have to do with when you're running your script. In your jsFiddle, you saved with the project defaults (which mean that your code is being called during the onLoad event, and with the MooTools library included).

If I switch your project to No Wrap (head) and No-Library (pure JS), the code stops working.

The reason is that you are attempting to do the work with the DOM before it's fully loaded into memory. You need to either run your script at the bottom of your page (which you can simulate in jsFiddle by changing the drop down to No Wrap (body)), or by running if after the onLoad event is fired in the browser:

window.onload = function(){
        var div2= document.createElement('div');  
        div2.className = "div2" ;
        var h1 = document.createElement('h1');
        h1.innerHTML= "test h1" ;
        var h2 = document.createElement('h2');
        h2.innerHTML= "test h2" ;
        var p = document.createElement('P');
        p.innerHTML= "p2" ;            
        div2.appendChild(h1);
        div2.appendChild(h2);
        div2.appendChild(p);
       document.getElementById('div1').appendChild(div2);
};

That will run it when the onLoad event has been fired, when the DOM is ready for access.

See this fiddle: http://jsfiddle.net/mori57/jzBpK/

Collectives™ on Stack Overflow

Creating Div into Div using 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