jQuery Guide: How to Create and Place New Elements Effectively (Part 2)

In our previous article, we began exploring how to create and insert new elements using jQuery’s Append method. We covered the basics of adding new elements to the HTML body.

This time, we’re going a step further. We’ll look at how to place new elements at specific locations within an existing structure, rather than just at the end.

To illustrate this, we’ve set up an HTML unordered list as an example. This list has an id attribute labeled as list.

 <ul id="list">
   <li>Ut enim ad minim veniam.</li>
   <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
   <li>Duis aute irure dolor in reprehenderit.</li>
   <li>Sunt in culpa qui officia deserunt mollit.</li>
   <li>Excepteur sint occaecat cupidatat non proident.</li>
 </ul>

How to Insert a New Element as the First Child

In this section, we’ll demonstrate how to create a new element and place it as the first child within a parent element. We’ll first explore how to accomplish this using plain JavaScript and then using jQuery.

The goal here is to create a new <li> element and insert it as the first child of an existing <ul> element. Let’s start by creating the new element and its text content.

 var li = document.createElement('li'),
 txt = document.createTextNode('This is the text in the new element.');
 
 li.appendChild(txt);

To insert the new element as the first child, we’ll use JavaScript’s .insertBefore() function. This function allows us to place an element before another existing element.

Next, we need to identify the parent element where the new element will be nested. In this example, we’ll use the element’s ID attribute to do so:

 ul = document.getElementById('list');

After that, we’ll determine which element the new one should precede. In this case, it’s the first child of the parent. We can find this first child in JavaScript using the .firstChild function, storing it in a variable named firstChild.

 var firstChild = ul.firstChild;

Finally, we apply the .insertBefore() function as follows:

 ul.insertBefore(li, firstChild);

This code will place the new li element before the first child. If you inspect the element using a browser’s Developer Tool, you’ll see the following:

As you can see, our new element is now the first child of the <ul>.

Inserting Elements Using jQuery

Alternatively, you can use jQuery’s .prepend() function to achieve the same result in a more straightforward manner.

 $('#list').prepend('<li>This is the text in the new element. (using jQuery)</li>');

How to Insert a New Element at a Specific Position

In this section, we’ll explore how to insert a new element at a specific location within a list, such as before or after the 3^rd child. We’ll cover both JavaScript and jQuery methods for achieving this.

Let’s start by creating a new element, similar to our previous example:

 var li = document.createElement('li'),
 txt = document.createTextNode('This is the text in the new element.');
 li.appendChild(txt);

First, we need to identify the list elements. In JavaScript, we can use the .getElementsByTagName() method to select elements by their tag name:

 var list = document.getElementsByTagName('li');

Next, we’ll target the 3^rd list element by its index number. In JavaScript, indexing starts at 0, so the 3^rd element corresponds to index 2. We’ll store this element in a variable named nthList:

 var nthList = list[2];

Now, to insert the new element before the 3^rd child, we can use the .insertBefore() function:

 ul.insertBefore(li, nthList);

If you inspect the list in a browser, you’ll see the following:

To insert the new element after the 3^rd child, we can use the .insertBefore() function in conjunction with .nextSibling:

 ul.insertBefore(li, nthList.nextSibling);

Inserting Elements Using jQuery

jQuery simplifies this process with the .before() and .after() functions. We can also use jQuery’s .eq() function to target elements by their index.

For example, to insert the new element before the 3^rd child, you can use:

 $('li').eq(2).before('<li>This is the text in the new element. (using jQuery)</li>');

Alternatively, to insert it after the 3^rd child, you can write:

 $('li').eq(2).after('<li>This is the text in the new element. (using jQuery)</li>');

Conclusion

We’ve covered how to create and insert new elements using both JavaScript and jQuery. Both methods have their merits, and the choice between them ultimately depends on your specific needs and preferences.

This guide should be particularly useful for those who are new to jQuery or JavaScript. If you have any questions or comments, feel free to share them in the comment section below.

Additional Resources

If you’re interested in diving deeper into this topic, here are some valuable resources you can explore:

• JavaScript .insertBefore Function – MDN
• JavaScript .nextSibling Function – MDN
• jQuery .before() Function – jQuery API Documentation
• jQuery .after() Function – jQuery API Documentation
• jQuery .eq() Function – jQuery API Documentation