如何更改嵌套标签中第一个标签的文本？

Question

我正在尝试更改以下h5标记中的文字：

<h5 id="status"><img id="status-icon" src="some image">Change Text</h5>

我正在使用：

var heading = document.getElementById("status")
heading.textContent = "Resolved"

以上替换了img标签。

如何只更改h5的文字？

Answer 1

您可以设置.textContent

.firstElementChild.nextSibling的{​​{1}}

heading

var heading = document.getElementById("status");
heading.firstElementChild.nextSibling.textContent = "Resolved";

或使用<h5 id="status"><img id="status-icon" src="#" alt="status-icon">Change Text</h5>和.querySelector()

.nextSibling

var heading = document.getElementById("status");
heading.querySelector("img").nextSibling.textContent = "Resolved";

Answer 2

您可以使用以下JavaScript代码实现相同的目标：

document.getElementById("status").lastChild.textContent = "Resolved";

<强>演示：

document.getElementById("status").lastChild.textContent = "Resolved";

<h5 id="status"><img width="100" height="100" id="status-icon" src="https://i.imgur.com/kP1Gj7J.jpg"/>Change Text</h5>

Answer 3

使用childNodes属性获取实际为文本的第二个节点。所以图像保持不变。

var elm = document.getElementById("status");
elm.childNodes[1].nodeValue = "Resolved";

<h5 id="status"><img id="status-icon" src="#" alt="image is unchanged"> Change Text</h5>

Answer 4

这是一个解决方案：

＆＃13;

＆＃13;

var heading = document.getElementById("status");
heading.childNodes[1].nodeValue = "Resolved";

＆＃13;

<h5 id="status"><img id="status-icon" src="some image"\>Change Text</h5>

＆＃13;

＆＃13;

＆＃13;