Question

我正在尝试将多个链接添加到Javascript的段落中。我试图将for ch in job_lists/*; do <PATH_TO_MERLIN>/merlin mkt -log 30 -rollList $ch > "output_$(basename $ch)" & done添加到每个元素，但仅将其添加到创建的第一个元素中。我的Javascript代码是：

export PATH=$PATH:<PATH_TO_MERLIN>

代码创建一个新的onclick元素，为其提供一个ID和一个onclick事件。 function addDrawing(url, html, id) { var elem = document.createElement('a'); elem.id = id; elem.onclick = function() {tableauClicked(id)}; fetch(url) .then( r => r.text() ) .then(t => elem.innerText = t) html.appendChild(elem) }部分从txt文件获取文本，以显示在链接中。链接已添加到a段落中。没有ID重复。

Answer 1

我查看了您的代码，感谢您的分享，非常棒。

您遇到的问题不在addDrawing函数中。

问题出在prependDrawing函数中

function prependDrawing(url, html) {
  fetch(url)
  .then( r => r.text() )
  .then(t => html.innerHTML = t + html.innerHTML);
}

在这里，您将innerHTML替换为新值，这意味着将重新评估DOM并且丢失原始元素，请确保您仍然看到创建的HTML，但事件侦听器onclick将会丢失。

幸运的是，可以使用.insertAdjacentHTML方法轻松解决此问题。

function prependDrawing(url, html) {
  fetch(url)
  .then( r => r.text() )
  .then(t => html.insertAdjacentHTML('afterbegin', t));
}

这可能看起来有些奇怪，但是可以正常工作。

Element接口的insertAdjacentHTML（）方法将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析正在使用该元素的元素，因此不会破坏该元素内部的现有元素。这避免了额外的序列化步骤，使其比直接的innerHTML操作快得多。

有关完整文档，请查看https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

希望这会有所帮助。

elem.onlick用于多个元素

1 个答案: