Changing text of div without changing its inner tag contents

Question

In this plunk I have a div that contains some text and a span, also with text.

My objective is to change the text of the div, without changing the text of the span.

I tried with jQuery but the problem is that the entire div text changes, replacing also the span text, any ideas?

HTML

<div id="id1">some text to change <span>THIS TEXT STAYS</span></div>

Javascript:

$( document ).ready(function() {
    var id1 = $("#id1");
    id1.text("New Text");
});

For your use, do you have to worry about the `` being in the beginning or middle of the text? — MonkeyZeus, Aug 03 '16 at 15:49
Possible duplicate of [How can I change an element's text without changing its child elements?](http://stackoverflow.com/questions/4106809/how-can-i-change-an-elements-text-without-changing-its-child-elements) — insertusernamehere, Aug 04 '16 at 10:11

score 35 · Accepted Answer · answered Aug 03 '16 at 10:41

This is one of the rare places jQuery doesn't do much for you. You want to go straight to the Text node in that div:

$( document ).ready(function() {
    var id1 = $("#id1");
    // The [0] accesses the raw HTMLDivElement inside the jQuery object
    // (this isn't accessing internals, it's documented).
    // The `firstChild` is the first node within the `div`, which is
    // the text node you want to change. `nodeValue` is the text of the
    // Text node.
    id1[0].firstChild.nodeValue = "New Text";
});

<div id="id1">some text to change <span>THIS TEXT STAYS</span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Or without using jQuery (other than ready) at all:

$( document ).ready(function() {
    var id1 = document.getElementById("id1");
    id1.firstChild.nodeValue = "New Text";
});

<div id="id1">some text to change <span>THIS TEXT STAYS</span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

score 10 · Answer 2 · answered Aug 03 '16 at 10:42

Please have a look at this approach:

$( document ).ready(function() {
    
  $("#id1").contents().get(0).nodeValue = "New Text 1 "
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="id1">some text to change <span>THIS TEXT STAYS</span></div>

score 3 · Answer 3 · answered Aug 03 '16 at 10:49

3

Try this code,

var id = document.getElementById('id1');
var newText = id.childNodes[0];
newText.nodeValue = 'Replaced by me ';

<div id="id1">some text to change <span>THIS TEXT STAYS</span></div>

answered Aug 03 '16 at 10:49

Hitesh Misro

3,397
1
21
50

score 1 · Answer 4 · answered Aug 03 '16 at 10:44

1

Use outerHTML :

   $('#id1').html("New Text "+$('#id1 span')[0].outerHTML)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1">some text to change <span>THIS TEXT STAYS</span></div>

answered Aug 03 '16 at 10:44

Abdennour TOUMI

87,526
38
249
254

score 0 · Answer 5 · answered Aug 03 '16 at 15:57

I know you've already accepted an answer but I figured for the sake of diversity I could show you a jQuery solution:

html

<div id="id1">
    some text to change <span style='color:red;font-weight:bold;'>THIS TEXT STAYS</span>
</div>

jQuery 1.12.4

var $id1 = $('#id1');
var $span = $id1.find('span');
$id1.text('New Text'); // or $id1.html('New Text'); // your choice
$id1.append($span);

This is probably not the most efficient solution but it gets the job done.

black_pottery_beauty · Answer 6 · 2016-08-03T16:57:49.030

-1

Html:-

 <div id="id1">some text to change <span>THIS TEXT STAYS</span></div>

Jquery:-

$( document ).ready(function() {
    var abcd = $('span').text();
    $("#id1").html("New Text "+'<span>'+abcd+'</span>');
});

We can reconstruct the entire required DOM by getting the span tage text()

Please check the Updated Fiddle

edited Aug 03 '16 at 16:57

answered Aug 03 '16 at 10:48

black_pottery_beauty

861
8
17

1

It doesn't preserve the span element, it wipes it and only keeps the value. If the div is updated again, the text that was previously in the span won't be there at all any more. – VLAZ Aug 03 '16 at 15:36
Please check the Update code now i am getting the text of span tag and regenerating the span tag so now is it working or not please siuggest – black_pottery_beauty Aug 03 '16 at 16:58

Changing text of div without changing its inner tag contents

6 Answers6