Organizational Research By

Surprising Reserch Topic

how can i change an elements text without changing its child elements


how can i change an elements text without changing its child elements  using -''

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 right 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.

Thanks in advance.
    

asked Sep 14, 2015 by Bea81N
0 votes
10 views



Related Hot Questions

9 Answers

0 votes

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:

**text to change**

text that should not change

text that should not change

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

in the first place (i.e. var your_div = $('your_div').get(0);).

answered Sep 14, 2015 by JKappel
0 votes
$("div").contents().filter(function(){ return this.nodeType == 3; }).filter(':first').text("change text");

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

answered Sep 14, 2015 by Arlene75Ssj
0 votes
**text to change**
text that should not change
text that should not change
$(document).ready(function() { $("#divtochange").contents().filter(function() { return this.nodeType == 3; }) .replaceWith("changed text"); });

This changes only the first textnode

answered Sep 14, 2015 by FelipaUPAYws
0 votes

See In action

Markup :

$(function() {
  $('input[type=button]').one('click', function() {
    var cache = $('#parent').children();
    $('#parent').text('Altered Text').append(cache);
  });
});
" rel="nofollow" target="_blank">https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
Some text
Child1
Child2
Child3
Child4
answered Sep 14, 2015 by MalChristie
0 votes

For the specific case you mentioned:

**text to change** text that should not change text that should not change

... 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

, you could do something like this:

var child = div.firstChild;
while (child) {
    if (child.nodeType == 3) {
        child.data = "New text";
        break;
    }
    child = child.nextSibling;
}
answered Sep 14, 2015 by JenniferKeye
0 votes

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


Voilà!

$('#header .mytext').text('New text here')
answered Sep 14, 2015 by AnkRowland
0 votes

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

HTML


JQUERY

var tmp=$("#header>div").html();
$("#header").text("its thursday").append(tmp);
answered Sep 14, 2015 by GinZgu
0 votes

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";
answered Sep 14, 2015 by BillKissner
0 votes

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):

Greetings

Hello
Goodbye

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

answered Sep 14, 2015 by GenKoertig

...