Change text inside an HTML tag with another tag nested

Question

I am talking about a span arranged this way -

 <span class="x">
  <span class="y"></span> my text
 </span>

Is there a way to change this text without wrapping it inside another tag?

@adeneo I mean for text to show there as written in the title, edited it out since it seems to be confusing you. — Rohan, Jan 26 '14 at 16:07
It's confusing because you used a comment, and comments aren't textnodes, but the edit makes it more clear. — adeneo, Jan 26 '14 at 16:07

adeneo · Accepted Answer · 2014-01-26T16:09:27.103

1

Something like this :

document.getElementsByClassName('y')[0].nextSibling.nodeValue = 'some other text';

edited Jan 26 '14 at 16:09

answered Jan 26 '14 at 16:02

adeneo

Could there be a jquery specific solution for this? – Rohan Jan 26 '14 at 16:13
Why would you need a jQuery specific solution when there's an easy way to do it without jQuery? jQuery doesn't really work well with rogue nodes, just with elements, so using the native methods, such as `nextSibling`, is easier. – adeneo Jan 26 '14 at 16:16
I wasn't aware about Jquery's inefficiencies when it comes to text nodes though. Will use your answer, please confirm once that the jquery specific answer I cooked up should be second choice just to be sure. – Rohan Jan 26 '14 at 16:22
1

@themosquitokiller - The jQuery answer you posted should work fine as well, but the native javascript above should work in all browsers and it's short and concise, so there's no point in using jQuery when you don't have to, but that's up to you. – adeneo Jan 26 '14 at 16:34

score 1 · Answer 2 · edited May 23 '17 at 10:25

1

Your question has been asked and answered before. Check this.

The JQuery solution to your question is :

$('.x').get(0).lastChild.nodeValue = " some-text-2";.

But anyhow, here's the full answer:

HTML

<div class='x'>
  <span class='y'></span>
  some-text-1

JS

  $('.x').get(0).lastChild.nodeValue = " some-text-2";

edited May 23 '17 at 10:25

Community

answered Jan 26 '14 at 16:18

Mohammed Joraid

score 0 · Answer 3 · answered Jan 26 '14 at 16:05

0

If you want to change a comment using jQuery, you will need to use .contents() and look at the node-type 8 for comment.

answered Jan 26 '14 at 16:05

simbabque

And you just removed `` – adeneo Jan 26 '14 at 16:05
yep, this removes the html inside the parent span, not a solution – Rohan Jan 26 '14 at 16:07
Right. Oops. Well. No need to add more stuff. I'll stick with the `contents()`. – simbabque Jan 26 '14 at 16:09

score 0 · Answer 4 · answered Jan 26 '14 at 16:18

0

This is one more Jquery based answer apart from the native javascript solution from adeneo.

$(".x").contents().filter(function() {
  return this.nodeType == 3;
}).text('blah');

answered Jan 26 '14 at 16:18

Rohan

also this $('.x').get(0).lastChild.nodeValue – Mohammed Joraid Jan 26 '14 at 16:21

4 Answers4