Appending a div element using javascript

Question

I am new to jQuery and I am practicing appending div elements. Here is my code:

<!doctype html>
<html lang="en">
<head>
    <title>Div Id</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<script>
    document.body.onload = addElement;

    function addElement () { 
        // create a new div element 
        // and give it some content 
        var newDiv = document.createElement("div"); 
        var newContent = document.createTextNode("This is a first division"); 
        newDiv.appendChild(newContent); //add the text node to the newly created div. 

        // add the newly created element and its content into the DOM 
        var currentDiv = document.getElementById("div1"); 
        document.body.insertBefore(newDiv, currentDiv); 
    }
</script>

<body>
    <div id="div1">This is a second division.</div>
</body>
</html>

Output would be:

This is a second division.

But as per my implementation the output should be

This is a first division
This is a second division.

I am not able to figure where it is going wrong. Please someone help me out with this.

Thanks in advance.

FYI the second script tag should either be inside the head element, or just before the </body> tag — Rory McCrossan
– Rory McCrossan, Commented Sep 29, 2015 at 8:31

Quentin · Accepted Answer · 2015-09-29 08:36:54Z

1

onload is a property of the window object, not the document.body object.

This works:

window.onload = addElement;

answered Sep 29, 2015 at 8:36

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

FalcoB · Accepted Answer · 2015-09-29 08:31:48Z

1

actually it works.... try to move your javascript in the head of you html file

document.body.onload = addElement;

function addElement () { 
  // create a new div element 
  // and give it some content 
  var newDiv = document.createElement("div"); 
  var newContent = document.createTextNode("This is a first division"); 
  newDiv.appendChild(newContent); //add the text node to the newly created div. 

  // add the newly created element and its content into the DOM 
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 
}

<div id="div1">This is a second division.</div>

answered Sep 29, 2015 at 8:31

FalcoB

1,32310 silver badges26 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

$('#div1').before('<div id=div0>This is a first division</div>')

demo

If you want Jquery it is as simple as this.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 29, 2015 at 8:32

guradio

15.6k4 gold badges39 silver badges64 bronze badges

3 Comments

Alberto Over a year ago

It's a valid solution using jQuery as the Q stated. Get my +1 to mitigate those unreasonable downvotes!

guradio Over a year ago

as i shall do to your answer. people just down vote with out even explanation.

Alberto Over a year ago

Indeed: the Q says "I am new to jQuery and I am practicing appending div elements." so both approaches are totally correct and pertinent.

Alberto · Accepted Answer · 2015-09-29 08:36:20Z

0

If you want to use jQuery you can check this fiddle:

$('body').prepend('<div>This is a first division</div>');

answered Sep 29, 2015 at 8:36

Alberto

1,8831 gold badge18 silver badges22 bronze badges

3 Comments

noa-dev Over a year ago

Stop suggestion jQuery for every baby task

guradio Over a year ago

@noa-dev OP wants Jquery it is stated.

Alberto Over a year ago

@noa-dev OS said "I am new to jQuery and I am practicing appending div elements." so my answer is in that direction.

Collectives™ on Stack Overflow

Appending a div element using javascript

4 Answers 4

Comments

Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related