How to change only text inside a div which has other divs

Question

I have html below. What I want to do depends on some conditions. I want to keep changing the text which is Sometitle.

<div id="header">
    Sometitle
    <div>
        <div>
            aa
        </div>
        <div>
            bb
        </div>
    </div>
</div>

I tried using Jquery below but it removes the other divs also.

$("#header").text("Its a thrusday today !");

How do I get this done? I cannot modify this HTML in any case. I just have to use jquery and get this thing done.

Here is a jsfiddle I created : http://jsfiddle.net/qYUBp/

You control the JavaScript, but have no influence over the HTML? — Brad Koch, Mar 07 '13 at 06:06
Possible duplicate: http://stackoverflow.com/questions/4106809/in-jquery-how-can-i-change-an-elements-text-without-changing-its-child-elements — Brad Koch, Mar 07 '13 at 06:07
@Yasser : doesn't *working on it* means you have the control over the HTML? — andri, Mar 07 '13 at 06:12
no @andri actually this HTML is rendered by jqgrid, I just wanted a quick fix for this and thanks to [aruncc](http://stackoverflow.com/users/432216/arjuncc) I got it. Thank you guys ! — Yasser Shaikh, Mar 07 '13 at 06:41

score 3 · Answer 1 · edited May 23 '17 at 11:45

3

That text Sometitle is an orphan node, you are going to want to wrap an element around it to properly manipulate it

<div id="header">
    <span>Sometitle</span>
    <div>
        <div>
            aa
        </div>
        <div>
            bb
        </div>
    </div>
</div>

EDIT

But since you regrettably cannot change the html, you could do as the solution suggests in the other post. They had a typo that I corrected here:

var your_div = document.getElementById('header');
var text_to_change = your_div.childNodes[0];
text_to_change.nodeValue = 'new text';

check your updated JsFiddle

edited May 23 '17 at 11:45

Community

1
1

answered Mar 07 '13 at 06:07

Kyle Weller

2,533
9
35
45

He says he can't alter the HTML. – Matt Whitehead Mar 07 '13 at 06:09
2

I'd agree, but the OP specifically stated they need to do this without changing the HTML. – Brad Koch Mar 07 '13 at 06:10
1

i guess you used this answer : http://stackoverflow.com/questions/4106809/in-jquery-how-can-i-change-an-elements-text-without-changing-its-child-elements#4106910 – supersaiyan Mar 07 '13 at 06:27
Yes @SachinRawal, as I stated in my explanation, I did. But I will update with a link for further clarification. There is a typo in that answer that prevented it from working, so I corrected it here, I also submitted an edit to that answer – Kyle Weller Mar 07 '13 at 06:28
yeahh i knw . i checked it..thnx anywys as i am also trying but not able to make it properly thnx buddy – supersaiyan Mar 07 '13 at 06:30

score 3 · Accepted Answer · answered Mar 07 '13 at 06:20

3

If you dont want it in a single line.

var tmp=$("#header>div").html();
$("#header").text("its thursday").append('<div>'+tmp+'</div>');

jsfiddle

answered Mar 07 '13 at 06:20

arjuncc

3,227
5
42
77

score 0 · Answer 3 · answered Mar 07 '13 at 06:09

0

try this

$("#header").html($("#header").html().replace("Sometitle","Its a thrusday today !"));

answered Mar 07 '13 at 06:09

ap.singh

1,150
4
15
35

the title needs to be updated again n again, so the replace("old", "new") cannot work in my case – Yasser Shaikh Mar 07 '13 at 06:11
This has the downside of removing all event handlers et al. Still a nice idea. – John Dvorak Mar 07 '13 at 06:12
This can be done easily by add a span to the title but yasser want to do without changing the html . So this is the way i found. – ap.singh Mar 07 '13 at 06:16

score 0 · Answer 4 · answered Mar 07 '13 at 06:25

0

for this case only, when rendering to browser

var new_s = "Its a thrusday today !";
var s = $("#header").children(":first").html();
$("#header").text(new_s+"<div>"+s+"</div>");

answered Mar 07 '13 at 06:25

Ravi Verma

225
2
4

I don't think it's a good idea that the text "`
`" and "`
`" appears in the document. Did you mean `.html(...)`? – John Dvorak Mar 07 '13 at 07:36

score 0 · Answer 5 · answered Mar 07 '13 at 06:49

can you check this

headerClone = $("#header").clone();
$(headerClone).find('div').remove();
var currentText = $(headerClone).html().replace(/(\r\n|\n|\r|\t)/gm,"");

newHtml = $("#header").html().replace(currentText,"Gotcha");
$("#header").html(newHtml);

JSFIDDLE

How to change only text inside a div which has other divs

5 Answers5