时间戳

首页 > 解决方案 > 使用纯 javascript 如何在结束标记之前插入 html？

javascript - 使用纯 javascript 如何在结束标记之前插入 html？

问题描述

我有一个动态生成的 HTML 文章标签列表。一些文章标签有一个名为“特色”的类。我想在结束文章标记之前插入一些 HTML，其中使用纯 JavaScript 将类命名为“特色”。

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

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

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

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

我尝试使用类似的东西，但它没有用。我收到一个错误：featuredItem.insertAdjacentHTML 不是函数。我应该使用什么语法来做到这一点？

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

标签： javascript

解决方案

getElementsByClassName返回一个类似数组的对象，因此您可以forEach通过每个具有特色类名称的数组对象：

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

推荐阅读