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.Click Me!Did you click it?”，但 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，将它放入这么一小段代码似乎有点大材小用。

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

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，然后获取跨度:

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