Скачать или смотреть How to Target a Specific Div in JavaScript by Data Attributes

Discover how to efficiently target a specific div element in your HTML using JavaScript and data attributes. Learn step-by-step methods to insert content dynamically.
---
This video is based on the question https://stackoverflow.com/q/68024092/ asked by the user 'Andrea De Donatis' ( https://stackoverflow.com/u/9157288/ ) and on the answer https://stackoverflow.com/a/68024107/ provided by the user 'Spectric' ( https://stackoverflow.com/u/14251221/ ) 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: Target a div to insert content after

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 Target a Specific Div in JavaScript by Data Attributes

If you're working with dynamically generated content, especially when dealing with rendered PDFs or similar elements, you might find yourself needing to insert HTML into particular sections of your document. In this post, we'll explore how to target specific div elements when all elements share the same class but differ in their data attributes.

The Problem

Imagine you have multiple div elements representing pages of a PDF, each with a unique data-page-number attribute. For example:

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

Your goal is to insert some HTML content after a specific page, say page 3 or page 69. The challenge here is determining how to select that specific div when they all belong to the same class.

The Solution

1. Selecting the Div by Data Attribute

You can effectively use the CSS attribute selector to grab the right page. Specifically, to select a page with a given data-page-number, you can use the following selector format:

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

This line of code tells the browser to look for any element with the class page that has a data-page-number of 3.

2. Inserting HTML Content

Once you've selected the desired div, you can utilize the insertAdjacentHTML method to insert content immediately following it. Here’s an example of how this works:

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

3. Complete Example

Putting it all together, here’s a simple example that safely selects a page and inserts content after it:

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

This code dynamically appends a new div immediately after the div for page 3.

Conclusion

Using data attributes in conjunction with CSS selectors makes it simple to target specific div elements in your HTML, even when they share class names with many other elements. By leveraging JavaScript methods like querySelector and insertAdjacentHTML, you can dynamically manipulate your document structure to suit your needs.

Whether you are enhancing the functionalities of e-books, PDFs, or just manipulating HTML content on a web page, utilizing this technique can make your JavaScript much more impactful and efficient.

Feel free to tailor the code examples to fit your particular use case. Happy coding!