CODEWITHSUNDEEP
javascriptjqueryhtml
adikitty CB
adikitty CB

Reputation: 57

Adding div tag below another div tag

I have a div tag with class divstudent, lets say this is div1 tag. Now I want to create another div tag div2 dynamically below this div1 tag, not inside of the div1 tag. I want to create outside of div1 tag using javascript. How can I do that?

"div1"
<div class="divstudent"></div>

<!-- i want to be like this -->
<!-- "div1" -->
<div></div>

<!-- "div2" -->
<div></div>

<!-- "div3" -->
<div></div>

Upvotes: 0

Views: 13438

Answers (5)

vinod verma
vinod verma

Reputation: 49

$(function() {
  $("div").eq(0).after("<div>This is div 2</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  This is div 1
</div>

Upvotes: 3

Makyen
Makyen

Reputation: 33306

There are many ways to do this. One significant difference in methods is if you choose to create the elements first using Document.createElement() and then insert the elements, or create and insert the elements in one step using one of the methods that allows you to insert HTML text.

Because it is simpler, but not necessarily better, the examples below show creating and inserting the two <div> elements in a single step using methods that allow inserting HTML text into the DOM.

JavaScript:
One is to use insertAdjacentHTML() and specify that it is to be inserted afterend of the element you are using.

document.querySelector() is used to find the first <div class="divstudent">. Then insertAdjacentHTML() is used to add the additional <div> elements. Element.removeAttribute() is then used to remove the class="divstudent". Note: if we had just wanted to set teh class to something different, even '', then we could have used Element.className.

NOTE: In this answer, text identifying each <div> has been added to the <div>s so there is something visible in the examples in this answer.

//Find the first <div class="divstudent"> in the document
var studentDiv = document.querySelector('div.divstudent');
//Insert two new <div> elements.
studentDiv.insertAdjacentHTML('afterend','<div>2</div><div>3</div>');
//Remove the class="divstudent"
studentDiv.removeAttribute('class');
<div class="divstudent">1</div>

jQuery:
While your question is tagged jQuery, a comment you posted implies you are just using JavaScript. Thus, I am not sure if jQuery works for you.

If you want to use jQuery, then you can use .after() to add the <div> elements. You can then use .removeAttr() to remove the class="divstudent". 

// Get the first <div class="divstudent">.
//   Store it in a variable so we only walk the DOM once.
var $studentDiv = $('div.divstudent').eq(0); 
//Add the two new <div> elements 
$studentDiv.after('<div>2</div><div>3</div>');
//Remove the class="divstudent"
$studentDiv.removeAttr('class');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divstudent">1</div>

Upvotes: 1

Carl
Carl

Reputation: 1816

You create a new div (in js), then just append your newDiv, after the target div. Something along the lines of in vanilla js:

// Create your new div
var newDiv = document.createElement("div");   
newDiv.innerText = "New Div!"; 
// Grab the div you want to insert your new div after   
var target_div = document.querySelector("div.divstudent");
// Insert newDiv after target_div (before the thing after it)
target_div.parentNode.insertBefore(newDiv, target_div.nextSibling);

Upvotes: -1

Dave
Dave

Reputation: 10924

Since this is tagged , just use .after()

$(function() {
  $("div").eq(0).after("<div>This is div 2</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  This is div 1
</div>

Upvotes: 1

Alberto Delgado Roda
Alberto Delgado Roda

Reputation: 471

Try something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Divs creator</title>

    <script type="text/javascript">
        window.onload = function () {
            var divReference = document.querySelector('.divstudent');
            var divCounter = 0;
            divReference.addEventListener('click', function () {
                var divToCreate = document.createElement('div');
                divToCreate.innerHTML = ++divCounter;
                divReference.parentNode.appendChild(divToCreate);
            }, false);
        }
    </script>
</head>
<body>
    <div class="divstudent">
        <input type="button" value="add div below divstudent">
    </div>

</body>
</html>

Upvotes: 1

Related Questions