Javascript 使用replaceChild更改节点

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

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

“早上好”//node
“早上好”//newnode

我尝试使用以下方法将旧节点替换为新节点：

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

newNode=node.cloneNode（）；
newNode.nodeValue=“早上好”；
node.parentNode.replaceChild（newNode，node）；

但这根本不起作用，因为我认为节点的节点类型为3。span标记呈现为文本。在这种情况下，我尽量不使用jQuery。多谢各位

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

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

早上好

---

“早上好”是div的childNode，在本例中是文本节点。

是的，您是对的，这不起作用

像这样的方法应该会奏效：

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

正如你所能做的，这会有点牵扯进来。domapi不是最好的

您可以将这一点减少到：

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

node.parentNode.innerHTML=“早上好”；

首先尝试禁用可编辑内容，替换内容，然后重新启用

//disable contentEditable
ele.contentEditable=false;

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

//re-enable
ele.contentEditable=true;

//禁用contentEditable
ele.contentEditable=false；
//替换
ele.innerHTML=ele.innerHTML.replace（/good/i，'good'）；
//重新启用
ele.contentEditable=true；

---

因此，这可能有点粗糙，但它完成了工作。我发现，您需要将父节点包装为某种元素节点，然后将

中所需文本的一部分包装到另一个节点，并将其附加到父节点，最后将文本节点的其余部分附加到父节点

<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>

var text1=document.createTextNode（“好”）；
var text2=document.createTextNode（“早上好”）；
var span=document.createElement（“span”）；
var parent=document.createElement（“div”）；
span.appendChild（text1）；
父、子（span）；
父.子（text2）；
//使用调试器进入每个对象
调试器；

---

如果您想尝试：

该节点不是字符串，而是html文本节点。虽然这不会改变我的解决方案，但我想指出的是，

contenteditable

在大多数浏览器中都有缺陷。不过每次更新都会变得更好。@Halcyon但如果我使用contenteditable，则在跨度内插入文本，而不是父节点