Скачать или смотреть How to Add an HTML Element Between Two Others Using JavaScript

Learn how to effectively manage your HTML structure by adding an element between two existing ones with JavaScript. Enhance your web design with easy techniques!
---
This video is based on the question https://stackoverflow.com/q/73617958/ asked by the user 'arnaudbey' ( https://stackoverflow.com/u/2835089/ ) and on the answer https://stackoverflow.com/a/73618239/ provided by the user 'Nick' ( https://stackoverflow.com/u/9473764/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to add an HTML element starting after one and finishing before another one

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Add an HTML Element Between Two Others Using JavaScript

In web development, you might find yourself needing to manipulate HTML elements dynamically. One common requirement is to add a new HTML element right after one identified element and before another. This post will provide you with a detailed guide on how to achieve this using JavaScript, along with examples.

The Problem Statement

Imagine you have a simple HTML structure consisting of two horizontal rules (<hr> tags) with some content in between. Here's the initial structure:

[[See Video to Reveal this Text or Code Snippet]]

Your goal is to automatically add a parent <div> around the content between the two <hr> elements. This will allow you to apply styles to the content more effectively.

Solution Overview

We will explore two different JavaScript methods for achieving this:

Method 1: Using a while loop to insert the new <div> element.

Method 2: Using array methods like indexOf and findIndex without explicit loops.

Method 1: Using a while Loop

This method involves iterating over the siblings of the first <hr> and appending them to a newly created <div>:

[[See Video to Reveal this Text or Code Snippet]]

Explanation:

Select the First <hr> Element: We use getElementById to target the specific <hr>.

Create a New <div> Element: We create a <div> element to wrap our content.

Insert the <div> into the DOM: This is done right after the identified <hr>.

Loop Through Siblings: The while loop continues until it encounters the next <hr> or no nodes left. The sibling elements are moved into the newly created <div>.

Method 2: Using Array Methods

This method achieves the same result with a modern approach, making the code more concise:

[[See Video to Reveal this Text or Code Snippet]]

Explanation:

Collect Sibling Nodes: We convert the siblings of our selected <hr> into an array.

Slice the Array: We use slice and indexOf to find all sibling nodes after our target <hr>.

Find the Next <hr>: We locate the next <hr> using findIndex.

Create and Insert <div>: Finally, we create a <div> and append the sibling nodes to it before inserting it into the DOM.

Final Touch: Adding CSS Styles

To visually distinguish the newly created <div>, you can add some CSS styling:

[[See Video to Reveal this Text or Code Snippet]]

Feel free to customize the styles to fit your design needs!

Conclusion

In this guide, you learned how to dynamically add an HTML element between two existing elements using JavaScript. By mastering both the looping and array methods, you can choose the approach that best fits your coding style. This skill can enhance your web projects by enabling dynamic content management and styling.

Happy coding! If you have any questions or need clarification, feel free to reach out!