How can I change an element's text without changing its child elements?

Question

I'd like to update element's text dynamically:

<div>
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

I'm new to jQuery, so this task seems to be quite challenging for me. Could someone point me to a function/selector to use?

If it is possible, I'd like to do it without adding a new container for the text I need to change.

Hohenzollern

“If it is possible, I'd like to do it without adding a new container for the text I need to change.” — really? Because it’d be much easier with a container in there. – Constringe

Guys, I looked at the original question and I don't think that the OP said anything about child elements... – Foote

According to W3 standards div can't even have text nodes (if i remember correct). A text container like <p>, <h1>, etc should be added. – Bon

@Mark: possibly in (X)HTML Strict, but not any more. (HTML5 is here now.) – Constringe

@Matt Ball: In actual html there are span tags instead of someChild. – Hohenzollern

@Mark DIV elements can contain text content (in XHTML 1.0) vidasp.net/HTML-structure-diagram.html – Foote

Answer 1

Mark’s got a better solution using jQuery, but you might be able to do this in regular JavaScript too.

In Javascript, the childNodes property gives you all the child nodes of an element, including text nodes.

So, if you knew the text you wanted to change was always going to be the first thing in the element, then given e.g. this HTML:

<div id="your_div">
   **text to change**
   <p>
       text that should not change
   </p>
   <p>
       text that should not change
   </p>
</div>

You could do this:

var your_div = document.getElementById('your_div');

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

Of course, you can still use jQuery to select the <div> in the first place (i.e. var your_div = $('your_div').get(0);).

Constringe

So a more up to date implementation of this answer would be $('#yourDivId')[0].childNodes[0].nodeValue = 'New Text'; – Collide

Answer 2

Update 2018

Since this is a pretty popular answer I decided to update and beautify it a little by adding the textnode selector to jQuery as a plugin.

In the snippet below you can see that I define a new jQuery function that gets all (and only) the textNodes. You can chain of this function as well with for example the first() function. I do a trim on the text node and check if it's not empty after the trim because spaces, tabs, new lines, etc. are also recognized as text nodes. If you need those nodes too then simple remove that from the if statement in the jQuery function.

I added an example how to replace first text node and how to replace all text nodes.

This approach makes it easier to read the code and easier to use it multiple times and with different purposes.

The Update 2017 (adrach) should still work as well if you prefer that.

As jQuery extension

//Add a jQuery extension so it can be used on any jQuery object
jQuery.fn.textNodes = function() {
  return this.contents().filter(function() {
    return (this.nodeType === Node.TEXT_NODE && this.nodeValue.trim() !== "");
  });
}

//Use the jQuery extension
$(document).ready(function(){
  $('#replaceAll').on('click', () => {
    $('#testSubject').textNodes().replaceWith('Replaced');
  });

  $('#replaceFirst').on('click', () => {
    $('#testSubject').textNodes().first().replaceWith('Replaced First');
  });
});

p {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
   **text to change**
   <p>text that should not change</p>
   <p>text that should not change</p>
   **also text to change**
   <p>text that should not change</p>
   <p>text that should not change</p>
   **last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>

Javascript (ES) equivalent

//Add a new function to the HTMLElement object so it can be used on any HTMLElement
HTMLElement.prototype.textNodes = function() {
  return [...this.childNodes].filter((node) => {
    return (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== "");
  });
}

//Use the new HTMLElement function
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#replaceAll').addEventListener('click', () => {
    document.querySelector('#testSubject').textNodes().forEach((node) => {
      node.textContent = 'Replaced';
    });
  });

  document.querySelector('#replaceFirst').addEventListener('click', function() {
    document.querySelector('#testSubject').textNodes()[0].textContent = 'Replaced First';
  });
});

p {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
  **text to change**
  <p>text that should not change</p>
  <p>text that should not change</p>
  **also text to change**
  <p>text that should not change</p>
  <p>text that should not change</p>
  **last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>

---

Update 2017 (adrach):

It looks like several things changed since this was posted. Here is an updated version

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

---

Original answer (Not working for current versions)

$("div").contents().filter(function(){ return this.nodeType == 3; })
.filter(':first').text("change text");

Source: http://api.jquery.com/contents/

Bon

Aha! I knew there’d be a clever jQuery function somewhere. Only problem with the solution as you’ve written it is that every text node gets the next text (e.g. including the ones within child elements). I guess it wouldn’t be too hard to limit it though? – Constringe

I had some trouble using .filter(':first'), but using .first() instead worked for me. Thanks! – Gailey

This doesn't work for me with .text() (see this jsfiddle) but does with .replaceWith() (jsfiddle here). – Hausa

This works for me, ugly as it is textObject = $(myNode).contents().filter(function(){ return this.nodeType == 3; })[0] $(textObject).replaceWith("my text"); – Ulrica

anyone curious about nodeType=3 it is mean filter only node type of "TEXT", w3schools.com/jsref/prop_node_nodetype.asp for more info – Depend

Answer 3

See In action

Markup :

$(function() {
  $('input[type=button]').one('click', function() {
    var cache = $('#parent').children();
    $('#parent').text('Altered Text').append(cache);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">Some text
  <div>Child1</div>
  <div>Child2</div>
  <div>Child3</div>
  <div>Child4</div>
</div>
<input type="button" value="alter text" />

Dowel

This won't preserve the order of the nodes, however. e.g. if the text was at the end of the element first, it would now be at the start. – Hecht

It won't preserve order but in most cases you want the text as the first or last node. So if append() doesn't get the desired result, try prepend() if you want the existing children infront of the text. – Inconformity

Answer 4

Just wrap the text you want to change in a span with a class to select.

Doesn't necessarily answer your question I know, but, probably a better coding practice. Keep things clean and simple

<div id="header">
   <span class="my-text">**text to change**</span>
   <div>
       text that should not change
   </div>
   <div>
       text that should not change
   </div>
</div>

Voilà!

$('#header .mytext').text('New text here')

Obsequious

This is the best approach by far, because it lets you pinpoint the text you want to change with precision. Using id="..." instead of class="..." would be even easier for people who don't want to use jQuery. – Brok

Answer 5

<div id="divtochange">
    **text to change**
    <div>text that should not change</div>
    <div>text that should not change</div>
</div>

$(document).ready(function() {
    $("#divtochange").contents().filter(function() {
            return this.nodeType == 3;
        })
        .replaceWith("changed text");
});

This changes only the first textnode

Entrust

Answer 6

For the specific case you mentioned:

<div id="foo">
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

... this is very easy:

var div = document.getElementById("foo");
div.firstChild.data = "New text";

You don't state how you want to generalize this. If, say, you want to change the text of the first text node within the <div>, you could do something like this:

var child = div.firstChild;
while (child) {
    if (child.nodeType == 3) {
        child.data = "New text";
        break;
    }
    child = child.nextSibling;
}

Molybdenum

Answer 7

$.fn.textPreserveChildren = function(text) {
  return this.each(function() {
    return $(this).contents().filter(function() {
      return this.nodeType == 3;
    }).first().replaceWith(text);
  })
}

setTimeout(function() {
  $('.target').textPreserveChildren('Modified');
}, 2000);

.blue {
  background: #77f;
}
.green {
  background: #7f7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="target blue">Outer text
  <div>Nested element</div>
</div>

<div class="target green">Another outer text
  <div>Another nested element</div>
</div>

Eisteddfod

Answer 8

Simple answer:

$("div").contents().filter(function(){ 
  return this.nodeType == 3; 
})[0].nodeValue = "The text you want to replace with"

Day

Answer 9

Here is yet another method : http://jsfiddle.net/qYUBp/7/

HTML

<div id="header">
   **text to change**
   <div>
       text that should not change
   </div>
   <div>
       text that should not change
   </div>
</div>

JQUERY

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

Clemente

Answer 10

Problem with Mark's answer is that you get empty textnodes aswell. Solution as jQuery plugin:

$.fn.textnodes = function () {
    return this.contents().filter(function (i,n) {
        return n.nodeType == 3 && n.textContent.trim() !== "";
    });
};

$("div").textnodes()[0] = "changed text";

Muricate

Answer 11

Lots of great answers here but they only handle one text node with children. In my case I needed to operate on all text nodes and ignore html children BUT PRESERVE THE ORDERING.

So if we have a case like this:

<div id="parent"> Some text
    <div>Child1</div>
    <div>Child2</div>
    and some other text
    <div>Child3</div>
    <div>Child4</div>
    and here we are again
</div>

We can use the following code to modify the text only AND PRESERVE THE ORDERING

    $('#parent').contents().filter(function() {
        return this.nodeType == Node.TEXT_NODE && this.nodeValue.trim() != '';
    }).each(function() {
    		//You can ignore the span class info I added for my particular application.
        $(this).replaceWith(this.nodeValue.replace(/(\w+)/g,"<span class='IIIclassIII$1' onclick='_mc(this)' onmouseover='_mr(this);' onmouseout='_mt(this);'>$1X</span>"));
	});

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div id="parent"> Some text
    <div>Child1</div>
    <div>Child2</div>
    and some other text
    <div>Child3</div>
    <div>Child4</div>
    and here we are again
</div>

Here is the jsfiddle of it working

Stepchild

Answer 12

I think you're looking for .prependTo().

http://api.jquery.com/prependTo/

We can also select an element on the page and insert it into another:

$('h2').prependTo($('.container'));

If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned):

<div class="container">  
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div> 
</div>

If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.

Tambour

I think not. It sounds like the OP is looking for a way to change the text, not add new text. – Kalvn

Answer 13

This is an old question but you can make a simple function like this to make your life easier:

$.fn.toText = function(str) {
    var cache = this.children();
    this.text(str).append(cache);
}

Example:

<div id="my-div">
   **text to change**
   <p>
       text that should not change
   </p>
   <p>
       text that should not change
   </p>
</div>

Usage:

$("#my-div").toText("helloworld");

Yoga

Answer 14

2019 vesrsion - Short & Simple

document.querySelector('#your-div-id').childNodes[0].nodeValue = 'new text';

Explanation

document.querySelector('#your-div-id') is used for selecting the parent (the element which text you are about to change)

.childNodes[0] selects the text node

.nodeValue = 'new text' sets text node value to "new text"

---

This answer is possibly inspired by Dean Martin's comment. Can't say for sure since I've been using this solution for years now. Just thought I should post this probability here because some people care about it more than the fact that this is the best solution.

Eloign

Answer 15

Javascript approach. select the parent div and we can use the firstChild.textContent

let myDiv = document.getElementById("parentDiv");
myDiv.firstChild.textContent = "** New Text **"

Mahau

This only works if there is text already present inside the html element – Tananarive

Answer 16

Here's a recursive way:

function changeInnerText(elm,text,newText) {
    if (elm == null) {
        return;
    }
    changeInnerTextHelper(elm.firstChild, text, newText);
}
function changeInnerTextHelper(elm, text, newText) {
    if (elm == null) {
        return;
    }
    if (elm.nodeType == 3 && elm.data == text) {
        elm.data = newText;
        return;
    }
    changeInnerTextHelper(elm.firstChild, text, newText);
    changeInnerTextHelper(elm.nextSibling, text, newText);
}

Kilby