如何在不影響JQuery中的內部div的情況下更改html div

Question

如何在不影響Jquery中父級div內部的div的情況下在HTML中更改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> 

JQUERY：

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

唯一的問題是，它是否有在HTML中沒有標籤工作正常，但例如它在<br>或<strong>等之後不改變。

JSFIDDLE HERE

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

Demo

或只是過濾器：

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

Demo