using plain javascript how to insert html before closing tag?

Question

I have a list of HTML article tags that are dynamically generated. Some of the article tags have a class named "featured". I want to insert some HTML right before the closing article tag where the class is named "featured" using plain javascript.

<article class="list-item featured">
  ....
</article>

<article class="list-item">
  ....
</article>

<article class="list-item featured">
  ....
</article>

<article class="list-item">
  ....
</article>

I tried using something like, but it did not work. I got an error: featuredItem.insertAdjacentHTML is not a function. What syntax should I be using to do this?

  var featuredItem = document.getElementsByClassName("featured");
  featuredItem.insertAdjacentHTML('beforeend','<div class="ribbon-featured"></div>');

https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore — epascarello, May 08 '18 at 18:57

score 0 · Answer 1 · answered May 08 '18 at 18:55

0

getElementsByClassName returns an array-like object containing 0 or more elements. You can't invoke insertAdjacentHTML on the set of returned elements, you need to pick one element from the set to manipulate its content.

answered May 08 '18 at 18:55

user229044

232,980
40
330
338

ReyHaynes · Answer 2 · 2018-05-08T19:13:10.407

0

getElementsByClassName returns an array-like object, so you can forEach through each array object with the featured class name as such:

document.getElementsByClassName("featured").forEach(featuredItem => {
  featuredItem.insertAdjacentHTML('beforeend','<div class="ribbon-featured"></div>')
})

edited May 08 '18 at 19:13

answered May 08 '18 at 18:59

ReyHaynes

2,932
1
15
22

I get this error ReyHaynes document.getElementsByClassName(...).map is not a function – user1669296 May 08 '18 at 19:07
@user1669296, sorry about that. Forgot it returns an array-like object so you can use `forEach` instead of `map`. Code updated. – ReyHaynes May 08 '18 at 19:13

using plain javascript how to insert html before closing tag?

2 Answers2