How to change html div without affecting inner divs in JQuery

Question

How can I change html inside a Div in HTML without affecting inner divs inside the parent div in Jquery.

So far I have this:

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

The only problem is that it works fine if there are no tags on the html, but for example it doesn't change after the <br> or <strong> etc.

JSFIDDLE HERE

PSL · Accepted Answer · 2013-07-09T23:03:06.223

2

One way:

$('#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

Or Just with the filter:

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

Demo

edited Jul 09 '13 at 23:03

answered Jul 09 '13 at 22:50

PSL

123,204
21
253
243

Excelent! The second one for some reason in my app didn't work, but the first one worked like a charm! Thank you very much for your help PSL! +1 XD – vashzero Jul 09 '13 at 23:02
Hi, I just found a bug, could this be fixed? http://jsfiddle.net/m5HLz/1/ – vashzero Jul 09 '13 at 23:26
@vashzero What is the bug i did not get it. – PSL Jul 10 '13 at 00:06
Hi, I am sorry if I did not explain before but here it goes: the result is: Ingresar Texto Aquí123 changed text text that should not change text that should not change And the result should be only: changed text text that should not change text that should not change Without the "Ingresar Texto Aquí123" because it is part of the html that should be modified. – vashzero Jul 10 '13 at 00:14
@vashzero do you mean output should remove `Ingresar Texto Aquí123`? But i thought you wanted to change free roaming textx. This text is inside the font-tag? – PSL Jul 10 '13 at 01:53
Yes that is correct, the thing is I need to remove EVERYTHING except those two div tags because they represent a function that is important and cant be removed. The rest should be replaced with the other text. Thanks! :) I am still looking in the web for the answer, I will update you if I get any information. REGARDS! – vashzero Jul 10 '13 at 02:33
Ok so you dont want to remove it instead you want to change the text of that too just like others?, in that case is there any specific identifier for those divs whose content should not be changed at all? like a class, id pattern, attribute etc? or can we add them? – PSL Jul 10 '13 at 02:37
yes there is an id pattern (div#) for example div0392 or div2910 etc. and there are also common classes (like editable, resizable and draggable). Thanks PSL. – vashzero Jul 10 '13 at 12:35

How to change html div without affecting inner divs in JQuery

1 Answers1