How to find element based on data-attribute with this existing JS code example?

Question

I want to target a specified div, but my example for now is only when it has an id. I want to use pure Javascript

current:

<div id="my_id">hello</div>

<script>
document.getElementById('my_id').insertAdjacentHTML('beforebegin',
    '<h3>text</h3>');
</script>

my case:

<div data-foo="bar">hello</div>
<div data-foo="club">hi</div>

How can I target the div that has the bar data-foo attribute ?

CodingIntrigue · Accepted Answer · 2015-05-11 11:53:39Z

1

You can do this using an attribute selector alongside querySelector:

document.querySelector("div[data-foo='bar']").insertAdjacentHTML('beforebegin',
'<h3>text</h3>');

<div data-foo="bar">hello</div>
<div data-foo="club">hi</div>

answered May 11, 2015 at 11:53

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1