Javascript 在字符串/字符串位置后插入HTML

我没有找到答案，所以希望有人能帮我

我试图在文本中的子字符串或位置前后非破坏性地插入HTML，以创建新的内联元素或包装现有文本。我将只使用innerHTML，并且已经完成了这项工作，但我确实希望保留可能绑定到特定DOMNode的事件侦听器。是否有一种方法或元素原型可以将textNodes作为单独的项来处理，从而允许我在它之后或之前附加HTML

代码的操作方式可能如下所示：

var testParagraph = document.getElementById("TestParagraph");

/** 
    text nodes would represent each item 
    that has been seperated by a space, for example 
**/

testParagraph.insertBefore(document.createElement("span"), testParagraph.textNodes[3])

谢谢你的时间

可以使用split（）分割元素的文本

var res = testParagraph.text().split(" ");
// each word is now in the res[0],res[1] ..
//and then you can create a textNode 
var textNode1 = document.createTextNode("before");
var textNode2 = document.createTextNode(res[0]); 

var spanElement = document.createElement("span");      
spanElement.appendChild(textNode1);
spanElement.appendChild(textNode2); 
//...   
//then return them into the testParagraph
testParagraph.appendChild(spanElement);

---

如果要将dom元素插入文本中，则不会出现事件处理程序的问题，因为事件处理程序不能绑定到文本本身。在不破坏任何事件处理程序的情况下更改DOM元素的内容是可能的，而且比您想象的要容易

function insertAtStringPos(el, pos, insertable) {
    if(!el.children.length) {
        var text      = el.outerText;
        var beginning = document.createTextNode(text.substr(0, pos));
        var end       = document.createTextNode(text.substr(pos - text.length));

        while (el.hasChildNodes()) {
            el.removeChild(el.firstChild);
        }

        el.appendChild(beginning);
        el.appendChild(insertable);
        el.appendChild(end);
    }
}

---

示例：

感谢您的回复。但是，这种方法是否允许我执行以下操作？将此字符串从：

Hello这是一个测试

转换为可能的

Hello这是一个测试

或甚至

Hello这是一个测试

？是的，您可以这样做！您将创建像我在上面创建的spanElement一样的span标记，然后将其插入到您想要的位置。太棒了！非常感谢你的代码。我尝试在（JSFIDLE）上运行它，但抛出了一个错误。也许您正在使用jQuery函数来处理

text（）

？是的，这是一个jQuery函数。您可以使用innerHtml->var x=document.getElementById（“myP”）.innerHtml..和一个叉来显示插入了元素/文本的元素：这太棒了！我没能让它在FireFox 47.0中运行，仅供参考，但在Chrome上它就像你说的那样工作。感谢您的代码示例！顺便说一句，我注意到如果容器中已经有HTML子元素，那么它们将从替换文本中省略。有解决方法吗？我刚刚查看了一些日志，显然是

document.createTextNode

剥离了标记。由于它是在函数中继承的，因此不确定是否有解决方法。它们将被忽略，因为

el.outerText

不返回HTML。您可以将第3行替换为

var text=el.outerHTML

，但您还需要在outerHTML返回createTextNode不会解析的字符串时，对

文档.createTextNode

行进行ammend。