Chèn một nút ở giữa văn bản

Question

Tôi quen với việc chèn các nút văn bản sau hoặc trước một nút tham chiếu nhất định. Nhưng, tôi muốn biết cách chèn thẻ giữa văn bản trong một nút nhất định. Ví dụ:

Before insertion: <p>Lorem dolor</p> 
After insertion: <p>Lorem <span>ipsum</span> dolor</p> 

Nút span phải được chèn sau N ký tự (Tôi không cần vị trí chọn con trỏ của người dùng) trong một nút khác. Điều đó có thể không?

Answer 1

Bạn có thể kiểm tra các nút innerHTML thuộc tính và sửa đổi điều đó. Hoặc bạn có thể xem bộ sưu tập childNodes và làm việc với các phần tử ở đó (xóa nút văn bản cũ và chèn các nút mới vào vị trí của nó).

Answer 2

Bạn cần đưa văn bản vào một biến, sau đó xóa văn bản khỏi DOM. Tách nó, sau đó chèn phần đầu tiên, sau đó nút nhịp của bạn sau đó phần thứ hai.

var p = document.getElementById('myParagraph'); 
var text = p.childNodes[0]; 

// Split the text 
var len = 5 
var text1 = text.nodeValue.substr(0, len); 
var text2 = text.nodeValue.substr(len); 

var span = document.createElement('span'); 
span.appendChild(document.createTextNode(' dolor')); 

// Remove the existing text 
p.removeChild(p.childNodes[0]); 

// Put the new text in 
p.appendChild(document.createTextNode(text1)); 
p.appendChild(span); 
p.appendChild(document.createTextNode(text2)); 

Answer 3

Cách thích hợp (sử dụng giao diện DOM-Core) sẽ là:

var p = document.getElementById('myParagraph'); 
var text = p.childNodes[0]; 
var at = 5; 

// create new span node with content 
var span = document.createElement("span"); 
span.appendChild(document.createTextNode('ipsum')); 

// Split the text node into two and add new span 
p.insertBefore(span, text.splitText(at));