使用replaceChild更改節點

假設我有一個nodeType = 3的節點，並且我希望單詞「good」被一個範圍包圍。使用replaceChild更改節點

"good morning to you" //node 
"<span>good</span> morning to you" //newnode

我嘗試使用以下，以更換新的節點舊節點：

newNode = node.cloneNode(); 
newNode.nodeValue = "<span>good</span> morning to you"; 
node.parentNode.replaceChild(newNode, node);

但因爲我覺得節點有3跨度一個節點類型，這並不在所有的工作標籤呈現爲文本。我試圖在這種情況下不使用jQuery。謝謝。

編輯1：爲了澄清，該節點是一個DIV CONTENTEDITABLE的childNode：

<div contenteditable=true>good morning to you</div>

「早上好給你」是div的childNode，併爲此實例的文本節點。

來源

2013-11-26 carmina

的節點不是一個字符串，它是一個html文本節點。 – carmina

儘管這並沒有改變我的解決方案，但我想提一提'contenteditable'在大多數瀏覽器中都有問題。不過每次更新都會變得更好。 – Halcyon

是的，你是對的，這是行不通的。

像這樣的東西應該工作：

var node = /* the textNode */ 
var spanEl = document.createElement("span"); 
var spanTextNode = document.createTextNode(); 
spanEl.appendChild(spanTextNode); 
spanTextNode.nodeValue = "good"; 
node.nodeValue = " morning to you" 
node.parentNode.insertBefore(spanEl, node);

正如你可以這樣會稍微複雜。 DOM API不是最好的。

你可以減少這種有點：

var node = /* the textNode */ 
var spanEl = document.createElement("span"); 
spanEl.appendChild(document.createTextNode("good")); 
node.nodeValue = " morning to you" 
node.parentNode.insertBefore(spanEl, node);

你也可以說：f.ck它和使用innerHTML

node.parentNode.innerHTML = "<span>good</span> morning to you";

來源

2013-11-26 12:58:18 Halcyon

謝謝！我想我可以用這個工作。 – carmina

嘗試首先禁用CONTENTEDITABLE，替換內容，然後重新啓用。

//disable contentEditable 
ele.contentEditable=false; 

//replace 
ele.innerHTML = ele.innerHTML.replace(/good/i,'<span>good</span>'); 

//re-enable 
ele.contentEditable=true;

http://jsfiddle.net/fLSht/1/

來源

2013-11-26 13:13:42 Andrew

所以，這可能是一個有點生，但它獲得的完成任務。我發現你需要將父節點包裝爲某種元素節點，然後在另一個節點中將你想要的文本的一部分包裝到<span>中，並將其附加到父節點，最後再追加文本節點的其餘部分添加到父項。

<script> 
    var text1 = document.createTextNode("good"); 
    var text2 = document.createTextNode(" morning to you"); 
    var span = document.createElement("span"); 
    var parent = document.createElement("div"); 

    span.appendChild(text1); 
    parent.appendChild(span); 
    parent.appendChild(text2); 

    // use debugger to go into each object 
    debugger; 
</script>

Here is my example如果您想嘗試：

來源

2013-11-26 13:36:29

使用replaceChild更改節點

回答

相關問題