Вставить HTML-код после строки String/String

Question

Я получил короткий ответ на этот вопрос, поэтому надеюсь, что есть кто-то, кто может мне помочь.

Я пытаюсь установить Вставить 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]) 

Спасибо за ваше время!

Answer 1

Если вы хотите вставить элементы 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); 
    } 
} 

Пример: http://jsfiddle.net/9a8rxhp4/

Answer 2

вы можете использовать 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);