如何用原生JavaScript在带featured类的article闭合标签前插入HTML

别担心，我帮你搞定这个需求！要在带featured类的<article>标签闭合前插入HTML，用原生JavaScript其实很简单，而且还能完美适配动态生成的元素，下面分情况给你讲具体实现：

基础实现（元素已存在或页面加载后生成） #

如果你的article标签是在页面初始加载完成后生成的，或者已经存在于DOM中，可以用以下步骤：

1. 首先获取所有带featured类的article元素
2. 遍历这些元素，用insertAdjacentHTML方法在元素内部末尾（也就是闭合标签前）插入你想要的HTML

示例代码：

// 等待DOM加载完成再执行（确保能获取到元素）
document.addEventListener('DOMContentLoaded', () => {
  // 获取所有带featured类的article
  const featuredArticles = document.querySelectorAll('article.featured');
  
  // 遍历每个目标元素
  featuredArticles.forEach(article => {
    // 这里替换成你要插入的HTML内容
    const customHTML = '<div class="featured-label">★ 精选内容</div>';
    // beforeend表示在元素内部的最后位置插入，刚好在</article>之前
    article.insertAdjacentHTML('beforeend', customHTML);
  });
});

insertAdjacentHTML是个非常实用的方法，它支持四个插入位置，这里我们用的beforeend完全符合你的需求——不会破坏原有的内容，精准插入到闭合标签前。

适配完全动态生成的元素 #

如果你的article标签是通过异步请求（比如AJAX）或者其他动态操作在页面加载后才逐步添加到DOM中的，上面的基础方法可能会漏掉新生成的元素。这时候可以用MutationObserver来监听DOM变化，自动处理新添加的featured article：

示例代码：

// 创建一个观察者实例，监听DOM变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 筛选出新增的带featured类的article元素
    const newFeaturedArticles = Array.from(mutation.addedNodes).filter(node => {
      return node.nodeType === Node.ELEMENT_NODE && node.matches('article.featured');
    });
    
    // 给每个新元素插入HTML
    newFeaturedArticles.forEach(article => {
      const customHTML = '<div class="featured-label">★ 精选内容</div>';
      article.insertAdjacentHTML('beforeend', customHTML);
    });
  });
});

// 配置观察选项：监听整个文档的子节点添加，包括子树
observer.observe(document.body, { childList: true, subtree: true });

这个方法会自动监控整个页面的DOM变化，一旦有新的article.featured元素被添加，就会立即执行插入操作，完美适配动态生成的场景。

为什么你之前的尝试可能失败？ #

常见的原因大概有这几个：

• 代码执行时机太早：在DOM还没加载完成或者article元素还没生成时就执行了代码，导致获取不到元素
• 用了不合适的插入方法：比如用innerHTML +=虽然也能实现，但会重新解析整个元素的内容，可能破坏原有事件绑定，效率也不如insertAdjacentHTML
• 选择器写错了：比如没精准定位到article.featured，而是只选了.featured，可能会选中其他带这个类的元素

内容的提问来源于stack exchange，提问作者user1669296