CODEWITHSUNDEEP
javascriptjquery
ps0604
ps0604

Reputation: 1071

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

Upvotes: 30

Views: 8308

Answers (6)

black_pottery_beauty
black_pottery_beauty

Reputation: 879

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

Upvotes: -1

MonkeyZeus
MonkeyZeus

Reputation: 20737

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.

Upvotes: 0

Hitesh Misro
Hitesh Misro

Reputation: 3461

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>

Upvotes: 3

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93173

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>

Upvotes: 1

vijayP
vijayP

Reputation: 11502

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>

Upvotes: 10

T.J. Crowder
T.J. Crowder

Reputation: 1074058

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>

Upvotes: 35

Related Questions