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

Question

有一个现有的 html div，里面有文本。我希望用附加文本修改 div 的内容，但在现有文本 (A) 和我要插入的内容 (C) 之间有一段文本 (B)。该 span 还具有由 id 实现的 css 样式，但已从代码片段中删除，因为它并不直接重要。

如果 span 位于最后，我可以简单地将 span 作为子项附加，这会将它放在 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?';

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

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

请使用 Vanilla JS。目前我的项目中没有 JQuery，将它用于这样一小段代码似乎有点过分了。

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

Answer 1

不使用 textContent，而是使用 createTextNode和 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，然后再获取span:

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);