CODEWITHSUNDEEP
jquery
Drejc
Drejc

Reputation: 14286

JQuery change inner text but preserve html

I would like to change the text of a HTML element but preserve the rest of the inner html with jQuery.

For instance:

<a href="link.html">Some text <img src="image.jpg" /></a>

replace "Some text" with "Other text", and the result should look like:

<a href="link.html">Other text <img src="image.jpg" /></a>

EDIT: My current solution is following:

var aElem = $('a');
var children = aElem.children();

aElem.text("NEW TEXT");
aElem.append(children);

But there must be some more elegant way of doing this.

Upvotes: 76

Views: 109169

Answers (14)

Drea58
Drea58

Reputation: 438

just use some plain js functionality:

$('a')[0].firstChild.nodeValue = "New Text";

Upvotes: 2

user3270784
user3270784

Reputation: 478

Shorthand for more elements and leading text to change:

elemshtml = '';
$("a *").each(function(){elemshtml +=$(this)[0].outerHTML});
$("a").html('Some text' + elemshtml);

Upvotes: 0

Darryl Ceguerra
Darryl Ceguerra

Reputation: 181

You can change it by .contents()

$('.yourElement').contents()[0].data = 'New Data';

where in your case the "[0].data" is your text data

Upvotes: 12

oceanBT
oceanBT

Reputation: 204

My generic version: 

let button = $('#yourElement');
button.html(button.html().replace(button[0].innerText, "New Text"));

Upvotes: 0

Yechezkel Deren
Yechezkel Deren

Reputation: 176

I added a jQuery function for that need.

you may need to convert the html-entities to text representation, so i added decodeEntities function.

function decodeEntities(encodedString) {
 if (typeof encodedString != "string") return encodedString;
 if (!encodedString) return "";
 var textArea = document.createElement('textarea');
 textArea.innerHTML = encodedString;
 return textArea.value;
}
jQuery.fn.textOnly = function(n) {
  if (this.length > 0)
   $(this).html(decodeEntities($(this).html()).replace($(this).text(), n));
  return $(this);
 }

Usage example $('selector').textOnly('some text')

Upvotes: 0

anthonygore
anthonygore

Reputation: 4987

An efficient and robust way that doesn't require you to know what the inner elements are or what the text is:

var $a = $('a');
var inner = '';
$a.children.html().each(function() {
    inner = inner + this.outerHTML;
});
$a.html('New text' + inner);

Upvotes: 1

jim_kastrin
jim_kastrin

Reputation: 5040

An alternative way would be to use the contents() method as follows:

Given

<a href="link.html">Some text <img src="image.jpg" /></a>

you can replace 'Some text' with jQuery

var text = $('a').contents().first()[0].textContent;
$('a').contents().first()[0].textContent = text.replace("Some text", "Other text");

jsFiddle example here.

The idea of contents() was inspired by this question, answered by user charlietfl.

Upvotes: 13

Brandon J. Boone
Brandon J. Boone

Reputation: 16472

This seems to work just fine.

Live Demo

<html>
    <head>
    </head>
    <body>
        <a href="link.html">Some text <img src="img.jpg" /></a>
    </body>

    </html>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $link = $('a');
            var $img = $link.find('img'); 
            $link.html('New Text');
            $link.append($img);
        });
    </script>

Upvotes: 41

Tim Vermaelen
Tim Vermaelen

Reputation: 7069

This is an improvement I've made to the jquery.uniform library. Specifically the $.uniform.update() function. I took the idea from acheong87 and changed it a bit.

The idea is to change the text in a span but preserve the inner HTML and event bindings. No need to store and append HTML this way.

if ($e.is("input[type=button]")) {
    spanTag = $e.closest("span");
    var contents = spanTag.contents();

    if (contents.length) {
        var text = contents.get(0);

        // Modern browsers support Node.TEXT_NODE, IE7 only supports 3
        if (text.nodeType == 3)
            text.nodeValue = $e.val();
    }
}

Upvotes: 0

Andrew Cheong
Andrew Cheong

Reputation: 30303

My solution, though a little late.

$('a').each(function() {
    var contents = $(this).contents();
    if (contents.length > 0) {
        if (contents.get(0).nodeType == Node.TEXT_NODE) {
            $(this).html('NEW TEXT').append(contents.slice(1));
        }
    }
});

Some notes:

  1. contents() includes text nodes, unlike children().
  2. It is necessary to create a copy of the contents via var contents = ... or else the remaining elements are lost forever once replaced by $(this).html('NEW TEXT').
  3. The length check is optional but recommended.
  4. The nodeType check is optional but recommended.

Upvotes: 14

xkeshav
xkeshav

Reputation: 54084

try this code 

$('a').live('click', function(){
    var $img = $(this).find('img'); 
    $(this).text('changed');
    $(this).append($img);
});

Upvotes: 1

Mark Coleman
Mark Coleman

Reputation: 40863

Since you can't modify the link an option would be to simply use replace

$("a").html($("a").html().replace("Some text", "Other text"));

Example on jsfiddle.

Upvotes: 37

Brian Driscoll
Brian Driscoll

Reputation: 19635

You'll need to add in a <span> element and change the text of that element, e.g.:

<a href="link.html"><span id="foo">Some text</span><img src="image.jpg" /></a>

Then, you can call from jQuery:

$("#foo").html("Other text");

And your result will effectively be:

<a href="link.html"><span id="foo">Other text</span><img src="image.jpg" /></a>

Upvotes: 0

meouw
meouw

Reputation: 42140

Wrap the text you want to change in a span 

<a href="link.html"><span>Some text</span> <img src="image.jpg" /></a> 

$('a span').html( 'new text' );

Upvotes: 23

Related Questions