Question

假设我有一个nodeType = 3的节点，我希望单词“good”被span包裹。

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

但这根本不起作用，因为我认为节点的nodeType为3. span标记呈现为文本。我试图在这种情况下不使用jQuery。谢谢。

编辑1：为了澄清，该节点是contentEditable div的childNode：

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

“早上好”是div的childNode，对于这个实例是一个文本节点。

Answer 1

是的，你是对的，这不行。

这样的事情应该有效：

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 it 并使用innerHTML

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

Answer 2

首先尝试禁用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/

Answer 3

所以，这可能有点RAW，但它完成了工作。我发现你需要将父节点包装成某种元素节点，然后在另一个节点的<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如果你想试验一下：

使用replaceChild更改节点

3 个答案: