Question

我有一个动态生成的HTML文章标签列表。一些文章标签有一个名为＆＃34;特色＆＃34;的类。我想在结束文章标记之前插入一些HTML，其中类名为＆＃34; features＆＃34;使用普通的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>');

Answer 1

getElementsByClassName返回包含0个或更多元素的类数组对象。您无法在返回元素的集上调用insertAdjacentHTML，您需要从集合中选择一个元素来操纵其内容。

Answer 2

getElementsByClassName返回一个类似数组的对象，因此你可以forEach通过每个数组对象使用精选类名称：

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

使用普通的javascript如何在关闭标签之前插入html？

2 个答案: