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

存在一个包含文本的现有html div。我希望用附加文本修改div的内容，但在现有文本（a）和我插入的文本（C）之间有一段文本（B）。span还有一个由id实现的css样式，但由于它并不直接重要，所以从代码段中删除了它

如果span位于末尾，我可以简单地将span作为子级附加，这将把它放在div文本的末尾。然而，我后来添加到div中的任何文本仍然会出现在span之前。至少据我所知，跨度总是在最后

假设现有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?';

'beforebegin': Before the element itself.
'afterbegin': Just inside the element, before its first child.
'beforeend': Just inside the element, after its last child.
'afterend': After the element itself.

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

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

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

var targetDiv=div；
div.textContent='Hello World！'；
targetDiv.innerHTML+='单击我！你点击了吗；
var spanText=div.span//以及一些变体，如div.children（1）；
spanText.onclick=函数（）{
在这里执行任务；
};

这里的问题是，我猜测，因为它位于innerHTML中，javascript无法识别/找到跨度，因此无法为其分配变量名。或者在其上指定onclick和其他内容。在这里，文本确实正确显示为“Hello World.Click Me！单击了吗？”，但onclick不起作用。因此，我尝试将onclick函数（是的，一行代码）放入innerHTML中，如下所示：

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

var targetDiv=div；
div.textContent='Hello World！'；
targetDiv.innerHTML+='单击我！你点击了吗；

这也不管用。与第一次尝试和第二次尝试不同，文本显示正确，但函数不起作用

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

香草JS谢谢。目前我的项目中没有JQuery，将它用于如此小的一段代码似乎有点过头了

---

非常感谢您的帮助，谢谢

不要使用

textContent

，而是使用和

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='单击我！'；//也可以在此处使用“createTextNode”。。。
spanText.onclick=函数（）{
log（“单击！”）；
};
div.appendChild（document.createTextNode（'单击了吗？'）；
文件.正文.附件（div）好消息！已经有了一个JavaScript方法。实际上有一些

和是允许您将
文本
和
html
定位在指定元素的前、后以及作为第一个子元素或最后一个子元素的方法

第一个参数采用位置值。这些可以是以下任意一种：

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?';

'beforebegin': Before the element itself.
'afterbegin': Just inside the element, before its first child.
'beforeend': Just inside the element, after its last child.
'afterend': After the element itself.

第二个参数是要在指定位置插入的
文本
或
HTML

作为一般情况下的示例：

 let element = document.querySelector("div"); //get a div element!

 element.insertAdjacentText("beforeend",
"this text node is the last child of the div");

 element.insertAdjacentHTML("beforeend", 
"<span>Just kidding, This span tag is now the last child of the div! </span>");

 element.insertAdjacentText("beforebegin", 
 "This text is inserted directly before the div!");

 element.insertAdjacentHTML("afterbegin", 
 "<span> This span tag is now the first child of the div!</span>");

 element.insertAdjacentText("afterend",
"This text is entered directly after the closing div tag!");

span{
颜色：红色；
光标：指针；
}
div{
颜色：蓝色；
}
是的，第二种解决方案简短、简洁、简单！我刚刚实现了它，它的工作正如预期的那样！非常感谢@Terrornado-如果您需要在现有元素的文本中插入类似的内容（例如，而不是按照上面的方法构建它），您可以在文本节点上使用。只是FWIW.：-）快乐编码@T.J.Crowder哈哈，splitText方法是一块宝石，我真的不知道它的存在。在过去的几年里，我花了很多时间编写简单的解析客户端（用于微模板或创建基本的自定义语法高亮），我有点尴尬，因为我不敢相信我从未遇到过这种情况+1.