使用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更改节点

回答

相关问题