Target a div to insert content after

user_9157288 0
Viewed 99

I am trying to insert some html content between pages of a rendered PDF. The structure is the following:

<div class="page" data-page-number="1" style="width: 1031px; height: 1459px;" data-loaded="true"></div>

<div class="page" data-page-number="2" style="width: 1031px; height: 1459px;" data-loaded="true"></div>

<div class="page" data-page-number="3" style="width: 1031px; height: 1459px;" data-loaded="true"></div>

<div class="page" data-page-number="4" style="width: 1031px; height: 1459px;" data-loaded="true"></div>

How can I target page 3 (or page 69)? They have all the same class and differ only by "data-page-number".

Thank you

Edit: I need to do something similar to:

node = document.getElementById('........');
node.insertAdjacentHTML('afterend', '<div> ... </div>');

Targeting specific pages.

Edit: So I did...

if (document.body.contains(document.querySelector('.page[data-page-number="72"]'))) {

node = document.querySelector('.page[data-page-number="72"]');

node.insertAdjacentHTML('afterend', '<div> ... </div>');

}
dom html javascript
2 Answers

You can use the CSS selector .page[data-page-number="{number}"], which targets all elements that have the page tag with the data-page-number attribute set to {number}:

var selected = document.querySelector('.page[data-page-number="3"]');
console.log(selected);
<div class="page" data-page-number="1" style="width: 1031px; height: 1459px;" data-loaded="true"></div>

<div class="page" data-page-number="2" style="width: 1031px; height: 1459px;" data-loaded="true"></div>

<div class="page" data-page-number="3" style="width: 1031px; height: 1459px;" data-loaded="true"></div>

<div class="page" data-page-number="4" style="width: 1031px; height: 1459px;" data-loaded="true"></div>

user_142512210

In addition to @Spectric's answer, you can dynamically create your selector string whenever you want:

let selectorString = '.page[data-page-number=' + num + ']'; 
var selected = document.querySelector(selectorString);
user_101401240
Related