无需innerHTML，如何在HTML中高效生成DOI链接？

方案1：批量处理（推荐） #

不需要给每个元素加ID，通过自定义数据属性结合原生JS批量生成链接：

• 先修改参考文献段落，仅在自定义属性中写一次DOI：

  <p data-doi="10.1234/example">Some text, doi:</p>
  

• 在页面底部添加脚本（或放在DOMContentLoaded事件中）：

  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('p[data-doi]').forEach(para => {
      const doi = para.dataset.doi;
      const link = document.createElement('a');
      link.href = `https://doi.org/${doi}`;
      link.textContent = doi;
      para.append(link, '.');
    });
  });
  

方案2：内联脚本生成链接 #

如果坚持内联处理，可直接用document.write在页面加载时生成链接，无需额外DOM操作：

<p>Some text, doi:<script>
  const doi = '10.1234/example';
  document.write(`<a href="https://doi.org/${doi}">${doi}</a>.`);
</script></p>

注意：document.write仅在页面加载阶段有效，适合静态页面的批量使用。

方案3：CSS伪元素（仅展示用） #

若仅需避免重复写DOI文本，但不需要真实可交互的链接，可使用此方案：

<p class="doi-ref" data-doi="10.1234/example">Some text, doi:</p>

.doi-ref::after {
  content: attr(data-doi) '.';
  color: #0066cc;
  text-decoration: underline;
  cursor: pointer;
}

缺点：伪元素内容不是真实<a>标签，无法右键复制链接或新窗口打开，仅适合纯展示场景。

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