JavaScript: Thêm phần tử vào văn bảnNode

Question

Tôi muốn thêm phần tử vào một mã văn bản. Ví dụ: tôi có một hàm tìm kiếm chuỗi trong textNode của phần tử. Khi tôi tìm thấy nó, tôi muốn thay thế bằng một phần tử HTML. Có một số tiêu chuẩn cho điều đó không? Cảm ơn bạn.

Answer 1

Bạn không thể thay thế chuỗi, bạn sẽ phải thay thế toàn bộ phần tử TextNode, kể từ TextNode elements can't contain child elements trong DOM.

Vì vậy, khi bạn tìm thấy nút văn bản của bạn, tạo ra yếu tố thay thế của bạn, sau đó thay thế các nút văn bản với một chức năng tương tự như:

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

Đối với những gì nó xuất hiện bạn muốn làm, bạn sẽ phải phá vỡ tách Dòng văn bản hiện tại thành hai Nút văn bản mới và một phần tử HTML mới. Dưới đây là một số mã mẫu để cho bạn hy vọng đúng hướng:

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

Có lẽ jQuery sẽ làm điều này dễ dàng hơn, nhưng rất tốt để hiểu tại sao tất cả nội dung này hoạt động theo cách đó.