Question

您好我有一个简单的html结构

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

我想要的是只替换文本（标题文本）而不会打扰<span>文本。这可能吗？

我不想添加任何其他dom元素，我想保留该结构。我当然是这样做的。

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

但你可以猜测......将替换所有的innert文本和span文本元素。

可能的解决方案：我正在考虑在变量中复制span的文本，然后将其与新的<h1>文本连接起来，但我认为可能存在一种更好，更干净的方法。

Answer 1

使用jQuery.contents()，您可以替换与此类似的nodeValue：

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

DEMO使用jQuery.contents()替换文本节点

Answer 2

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

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

Answer 3

另一个简短的jQuery解决方案：

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

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

Answer 4

我发现这可能有用question。

您可以通过以下方式获取子元素：

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

然后你可以使用跨越innerHTML作为h1元素innerHTML的一部分，即： h1_elt.innerHTML =“新文本”+ span.innerHTML +“”

您需要更改HTML的唯一方法是为h1元素提供一个id属性，然后使用它来代替h1_elt_id。

Answer 5

以下内容可行。

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/

基本上你正在做的是拍摄特定元素中所有孩子的照片，完全改变元素，然后使用我们拍摄的照片将所有之前的孩子重新附加到父元素上。

Answer 6

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

Answer 7

这将在没有jquery的情况下起作用：

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

如何仅更改DOM元素中的文本而不替换任何子元素

7 个答案: