ps0604 ps0604 - 4 months ago 8
Javascript Question

Changing text of div without changing its inner tag contents

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

Answer

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>