Menu
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");
});
330
Use the textContent property to change the text of a div element, e.g. div. textContent = 'Replacement text' . The textContent property will set the text of the div to the provided string, replacing any of the existing content.
The use of innerHTML creates a potential security risk for your website. Malicious users can use cross-site scripting (XSS) to add malicious client-side scripts that steal private user information stored in session cookies. You can read the MDN documentation on innerHTML .
innerHTML returns HTML, as its name indicates. Sometimes people use innerHTML to retrieve or write text inside an element, but textContent has better performance because its value is not parsed as HTML. Moreover, using textContent can prevent XSS attacks.
textContents is all text contained by an element and all its children that are for formatting purposes only. innerText returns all text contained by an element and all its child elements. innerHtml returns all text, including html tags, that is contained by an element.
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
