JavaScript: Öğe ekle öğesiNode

Question

Bir textNode öğesine bir öğe eklemek istiyorum. Örneğin: Öğenin textNode içinde bir dize arama işlevi var. Bulduğumda, bir HTML elemanı ile değiştirmek istiyorum. Bunun için bir standart var mı? Teşekkür ederiz.

Answer 1

Yalnızca dizeyi değiştiremezsiniz, DOM'deki tüm TextNode elements can't contain child elements öğesinden beri tüm TextNode öğesini değiştirmeniz gerekir.

Yani, metin düğümü bulduğunda, yapılacak değişim unsuru oluşturmak, sonra da benzer bir işlevle metin düğümü değiştirin: Eğer yapmak istediğiniz görünen İçin

function ReplaceNode(textNode, eNode) { 
    var pNode = textNode.parentNode; 
    pNode.replaceChild(textNode, eNode); 
} 

, sen kırmak zorunda kalacak Mevcut Metin Düğümünü iki yeni Metin Düğümüne ve yeni bir HTML öğesine ayırmak. Burada doğru yönde Umarım bunu işaret edecek bazı örnek kod var:

function DecorateText(str) { 
    var e = document.createElement("span"); 
    e.style.color = "#ff0000"; 
    e.appendChild(document.createTextNode(str)); 
    return e; 
} 

function SearchAndReplaceElement(elem) { 
    for(var i = elem.childNodes.length; i--;) { 
     var childNode = elem.childNodes[i]; 
     if(childNode.nodeType == 3) { // 3 => a Text Node 
      var strSrc = childNode.nodeValue; // for Text Nodes, the nodeValue property contains the text 
      var strSearch = "Special String"; 
      var pos = strSrc.indexOf(strSearch); 

      if(pos >= 0) { 
       var fragment = document.createDocumentFragment(); 

       if(pos > 0) 
        fragment.appendChild(document.createTextNode(strSrc.substr(0, pos))); 

       fragment.appendChild(DecorateText(strSearch)); 

       if((pos + strSearch.length + 1) < strSrc.length) 
        fragment.appendChild(document.createTextNode(strSrc.substr(pos + strSearch.length + 1))); 

       elem.replaceChild(fragment, childNode); 
      } 
     } 
    } 
} 

Belki jQuery bu daha kolay hale getirecek, ancak bu şeyler her bu şekilde işliyor anlamak için iyidir.