CODEWITHSUNDEEP
javascriptjqueryhtml
ncubica
ncubica

Reputation: 8485

How to only change the text in a DOM element without replacing any child elements

Hi I have a simple html structure

<h1>Title text <span>inner text</span></h1>

What I want is to replace only the text (Title text) without disturb the <span> text. Is this possible?

I don't want to add any other dom element, I would like to keep that structure. I been doing this of course.

$("h1").text("new text");

But you can guess... will replace all the innert text and the span text element as well.

Possible solution: I was thinking in copy in a variable the text of the span and then concatenate it with the new <h1> text, But I think maybe exist a better and clean way to do it.

Upvotes: 10

Views: 10255

Answers (7)

David Herzlos
David Herzlos

Reputation: 47

This is gonna work without jquery:

$title = documento.querySelector('your h1 element');
$title.firstChild.nodeValue = 'New Title text';

Upvotes: 2

seme
seme

Reputation: 97

const ChgBtn = document.querySelector('#change-title')
const title = document.querySelector('#page-title')

ChgBtn.addEventListener('click', (event) => {
  if (title.innerHTML === 'job') {
    title.innerHTML = 'better job'
    event.target.innerHTML = 'Change title back'
  }
  else if (title.innerHTML === 'better job') {
    title.innerHTML = 'job'
    event.target.innerHTML = 'Change Title'
  }
  else {
    console.error('Wrong')
  }
})

Upvotes: -1

VisioN
VisioN

Reputation: 145398

Another short jQuery solution:

$("h1").contents().first().replaceWith("new text");

DEMO: http://jsfiddle.net/FvbJa/1/

Upvotes: 2

jeremy
jeremy

Reputation: 10057

The following will work.

var h1 = document.getElementById("h1"),
    children = Array.prototype.slice.call(h1.children),
    newText = document.createTextNode("Hello. ");

h1.innerHTML = "";
h1.appendChild(newText);

while(children) {
    h1.appendChild(children.shift());
}

http://jsfiddle.net/TFYmv/

Basically what you're doing is taking a picture of all the children in a specific element, changing the element completely, then re-appending all the previous children back onto the parent element using the picture we took.

Upvotes: 1

Justin Kruse
Justin Kruse

Reputation: 1130

I found this question which might be useful.

you can get the child element by doing this:

var h1_elt = document.getElementById(h1_elt_id);
var span = h1_elt.getElementsByTagName("span");

You can then use the spans innerHTML as part of the h1 elements innerHTML, i.e.: h1_elt.innerHTML = "new text "+span.innerHTML+""

The only thing you would need to change about your HTML is to give the h1 element an id attribute, then use that in place of h1_elt_id.

Upvotes: 0

Nope
Nope

Reputation: 22339

Using jQuery.contents() you can replace the nodeValue similar to this:

$("h1").contents()[0].nodeValue = "new text ";

DEMO using jQuery.contents() to replace a text node

Upvotes: 11

VisioN
VisioN

Reputation: 145398

$("h1").each(function() {
    var textNode = document.createTextNode("new text");
    this.replaceChild(textNode, this.firstChild);
});

DEMO: http://jsfiddle.net/FvbJa/

Upvotes: 4

Related Questions