Как изменить текст только в элементе DOM без замены дочерних элементов

Привет у меня есть простая структура html

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

Я хочу заменить только текст (текст заголовка), не нарушая <span> текст. Возможно ли это?

Я не хочу добавлять какой-либо другой элемент dom, я хотел бы сохранить эту структуру. Конечно, я этим занимаюсь.

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

но вы можете догадаться... заменит все innert текст и span текстовый элемент.

возможное решение: Я думал в copy в переменной текст промежутка, а затем объединить его с новым <h1> текст, но я думаю, может быть, существует лучший и чистый способ сделать это.

9
html javascript jquery

7 ответов

используя С помощью jQuery.contents () можно заменить на nodeValue примерно так:

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

демо используя jQuery.contents() для замены текстового узла

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

демо: http://jsfiddle.net/FvbJa/

4

еще одно короткое решение jQuery:

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

демо: http://jsfiddle.net/FvbJa/1/

1

Я нашел это вопрос что может быть полезным.

вы можете получить дочерний элемент, делая это:

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

затем вы можете использовать spans innerHTML как часть элементов h1 innerHTML, т. е.: h1_elt.innerHTML = "новый текст" +span.innerHTML будет+""

единственное, что вам нужно изменить в вашем HTML, - это дать элементу H1 атрибут id, а затем использовать его вместо h1_elt_id.

0

следующий будет работать.

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/

в основном вы делаете снимок всех детей в определенном элементе, полностью меняя элемент, а затем повторно добавляя всех предыдущих детей обратно в родительский элемент, используя снимок, который мы сделали.

0
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')
  }
})
-1

Это будет работать без jQuery:

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