javascript - 如何在不影响 JQuery 中的内部 div 的情况下更改 html div

Question

如何在不影响 Jquery 中父 div 内的内部 div 的情况下更改 HTML 中的 div 内的 html。

到目前为止，我有这个：

HTML：

<div id="div_to_change">
    This is the text
    <br>
    to be changed
    <div id="div_that_shouldnt_change">
       text that should not change
    </div>
    <div id="div_that_shouldnt_change2">
       text that should not change
    </div>
</div>

查询：

$("div").contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("changed text");

<br>唯一的问题是，如果 html 上没有标签，它可以正常工作，但例如在or<strong>等​​之后它不会改变。

JSFIDDLE 在这里

Answer 1

单程：

$('#div_to_change').contents().each(function () {
   //select only nodes with type 3 and having a node value to ignore empty lines, format chars etc
    if(this.nodeType == 3 
        && $.trim(this.nodeValue) 
        )
    {
        $(this).replaceWith("changed text")
    }
});

演示

或者只是使用过滤器：

$('#div_to_change').contents().filter(function () {
    return (this.nodeType == 3 
            && $.trim(this.nodeValue) 
           )
}).replaceWith("changed text");

演示