javascript - 如何使用 Javascript 在 div 中的文本之间创建可点击的跨度

Question

有一个现有的 html div，里面有文本。我希望使用附加文本修改 div 的内容，但在现有文本 (A) 和我正在插入的文本 (C) 之间有一段文本 (B)。span 也有一个由 id 实现的 css 样式，但从代码片段中删除，因为它没有直接关系。

如果跨度要放在最后，我可以简单地将跨度附加为一个孩子，这会将它放在 div 文本的末尾。但是，我稍后添加到 div 的任何文本仍将出现在跨度之前。至少据我所知，跨度总是在最后。

假设现有的 div 说“Hello World”。我希望使用 Javascript 添加以下内容：

var targetDiv = div;
div.textContent = 'Hello World! ';
var spanText = div.appendChild(document.createElement('span'));
spanText.innerHTML = 'Click Me!';
spanText.onclick = function(){
  perform task here;
};
div.textContent += ' Did you click it?';

div 不会显示“Hello World。点击我！你点击了吗？” 它会显示“Hello World。你点击了吗？点击我！”

在附加文本时，我尝试使用 innerHTML 在 div 内创建跨度，如下所示：

var targetDiv = div;
div.textContent = 'Hello World! ';
targetDiv.innerHTML += '<span>Click Me!</span> Did you click it?';
var spanText = div.span; //and variations such as div.children(1);
spanText.onclick = function(){
  perform task here;
};

这里的问题是我猜是因为它在 innerHTML 中，javascript 无法识别/找到跨度，因此无法为其分配变量名。或者分配 onclicks 和东西到它上面。在这里，文本确实正确显示为“Hello World。单击我！您单击了吗？”，但 onclick 不起作用。所以我尝试将 onclick 函数（是的，单行）放在 innerHTML 中，如下所示：

var targetDiv = div;
div.textContent = 'Hello World! ';
targetDiv.innerHTML += '<span onclick = "perform task here;">Click Me!</span> Did you click it?';

这也不起作用。与第一次尝试不同，与第二次尝试类似，文本显示正确但功能不起作用。

至于我为什么要做这样一个毫无意义的练习，这只是我正在做的一个抽象示例，我觉得在这种情况下上传实际代码只会让不必要的上下文陷入困境。但是，如果需要，我准备提供任何澄清。

请香草JS。目前我的项目中没有 JQuery，将它用于这么小的一段代码似乎有点矫枉过正。

非常感谢您的帮助，谢谢！

标签： javascripthtmlinnerhtml

Answer 1

而不是 using textContent， use createTextNodeand appendChild，请参见***以下行：

var targetDiv = div;
div.appendChild(document.createTextNode('Hello World! '));      // ***
var spanText = div.appendChild(document.createElement('span'));
spanText.innerHTML = 'Click Me!'; // Could use `createTextNode` here as well...
spanText.onclick = function(){
  // perform task here;
};
div.appendChild(document.createTextNode(' Did you click it?')); // ***

现场示例：

var div = document.createElement("div");

div.appendChild(document.createTextNode('Hello World! '));
var spanText = div.appendChild(document.createElement('span'));
spanText.innerHTML = 'Click Me!'; // Could use `createTextNode` here as well...
spanText.onclick = function(){
  console.log("Clicked!");
};
div.appendChild(document.createTextNode(' Did you click it?'));

document.body.appendChild(div);

当然，另一种方法是使用innerHTML然后获取跨度：

div.innerHTML = "Hello World! <span>Click Me!</span> Did you click it?";
div.querySelector("span").onclick = function(){
  console.log("Clicked!");
};

现场示例：

var div = document.createElement("div");

div.innerHTML = "Hello World! <span>Click Me!</span> Did you click it?";
div.querySelector("span").onclick = function(){
  console.log("Clicked!");
};

document.body.appendChild(div);