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

Question

嗨，我有一个简单的 html 结构

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

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

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

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

但你可以猜到......也会替换所有的内部文本和span文本元素。

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

Answer 1

使用jQuery.contents()你可以替换nodeValue类似这样的：

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

---

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

---

Answer 2

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

演示：http: //jsfiddle.net/FvbJa/

Answer 3

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

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

演示：http: //jsfiddle.net/FvbJa/1/

Answer 4

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

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

Answer 5

我发现这个问题可能有用。

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

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

然后，您可以使用 spans innerHTML 作为 h1 元素 innerHTML 的一部分，即： h1_elt.innerHTML = "new text "+span.innerHTML+""

您唯一需要更改 HTML 的就是给 h1 元素一个 id 属性，然后用它来代替 h1_elt_id。

Answer 6

以下将起作用。

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 7

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