• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / jQuery / Using jQuery to Add a Sibling to an Element

Using jQuery to Add a Sibling to an Element

April 6, 2022 Leave a Comment

We can use jQuery to add a sibling to an element by using either the jQuery insertAfter method or the insertBefore method.

$('<div id="div2"></div>').insertAfter("#div1");
$('<div id="div1"></div>').insertBefore("#div2");

Let’s say I have the following HTML:

<div id="div1">
  <p class="p1">This is paragraph 1</p>
  <p class="p2">This is paragraph 2</p>
  <p class="p4">This is paragraph 4</p>
</div>

If we wanted to add more siblings to the paragraph with class=”p4″ we can use the jQuery insertAfter() and insertBefore() methods to do this with the following jQuery code.

$('<p class="p3">This is paragraph 3</p>').insertBefore(".p4");
$('<p class="p5">This is paragraph 5</p>').insertAfter(".p4");

The result would be as follows:

This is paragraph 1
This is paragraph 2
This is paragraph 3
This is paragraph 4
This is paragraph 5

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery('<p class="p3">This is paragraph 3</p>').insertBefore(".p4");
jQuery('<p class="p5">This is paragraph 5</p>').insertAfter(".p4");

Using jQuery to Add a Sibling to an Element With a Click

In this example, we will have a simple div that will be a box. We will have two buttons to let the user enter a new div box before or after the first div.

Here is our HTML setup


<style>.box{ float: left; width: 50px; height: 50px; background: #7bbfa2; margin-right: 10px; margin-bottom: 10px; } #box1 { border: 2px solid #000; }</style>
<div id="div2">
  <div id="box1" class="box"></div>
</div><div class="clear"></div>
<div id="click-me1" class="click-me">Insert Before</div>
<div id="click-me2" class="click-me">Insert After</div>

In the jquery and JavaScript code, we will have two functions that run when each button is pressed. They will both create a new box with a new color and insert it either before or after the div depending on which button was pressed.

We will also get a random color and assign it to the box in its HTML code. We will then use the insertAfter() or insertBefore method to insert the new box.

Here is the JavaScript code to use jQuery to add a sibling to an element:

//Insert Before
$('#click-me1').click(function(){
  //Create a random color
  var randomColor = "#" + (Math.floor(Math.random()*16777215).toString(16));
  $('<div class="box" style="background: ' + randomColor + ';"></div>').insertBefore("#box1");
});
//Insert After
$('#click-me2').click(function(){
  //Create a random color
  var randomColor = "#" + (Math.floor(Math.random()*16777215).toString(16));
  $('<div class="box" style="background: ' + randomColor + ';"></div>').insertAfter("#box1");
});

The final code and output for this example of how to use jQuery to add a sibling to an element is below:

Code Output:

Insert Before

Insert After

Full Code:


<style>.box{ float: left; width: 50px; height: 50px; background: #7bbfa2; margin-right: 10px; margin-bottom: 10px; } #box1 { border: 2px solid #000; }</style>
<div id="div2">
  <div id="box1" class="box"></div>
</div><div class="clear"></div>
<div id="click-me1" class="click-me">Insert Before</div>
<div id="click-me2" class="click-me">Insert After</div>

<script>

$('#click-me1').click(function(){
  var randomColor = "#" + (Math.floor(Math.random()*16777215).toString(16));
  $('<div class="box" style="background: ' + randomColor + ';"></div>').insertBefore("#box1");
});
$('#click-me2').click(function(){
  var randomColor = "#" + (Math.floor(Math.random()*16777215).toString(16));
  $('<div class="box" style="background: ' + randomColor + ';"></div>').insertAfter("#box1");
});

</script>

Hopefully this article has helped you understand how to use jQuery to add a sibling to an element.

Other Articles You'll Also Like:

  • 1.  Using jQuery to Get the Position of Element
  • 2.  How to Filter a List of Divs with a Text Input Bar Using Javascript
  • 3.  How to Use jQuery to Change Button Text
  • 4.  How to Uncheck All Checkboxes in jQuery
  • 5.  Using jQuery to Disable a Button
  • 6.  Using jQuery to Select Multiple Ids
  • 7.  Using jQuery to Add Option to Select List
  • 8.  Using jQuery to Get Text Length
  • 9.  jQuery first() – Get the First Element
  • 10.  Using jQuery to Add CSS Important Style

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy