更改跨度的文本

Question

我想在点击按钮时更改跨度的文本。

其他一些问题通过附加文字来解决这个问题，但我不想保留原文，而是完全替换它。

我的代码现在看起来像这样：

<button class="btn btn-primary" id="msgbtn">Messages <span id="mgsunread" class="badge badge-light">4</span></button>

JavaScript：

$('#msgbtn').on('click', function(event) {
 span = document.getElementById("mgsunread");
 txt = document.createTextNode("6");
 span.appendChild(txt);
});

我会感激任何答案。

Answer 1

由于您使用的是jQuery，因此只需

$('#msgbtn').on('click', function(event) {
  $("#mgsunread").text("6");
});

如果你还想坚持使用vanila javascript

document.getElementById("mgsunread").textContent="6";

Answer 2

纯粹的js方法。

＆＃13;

＆＃13;

document.getElementById('msgbtn').onclick = replaceText;

function replaceText() {
document.getElementById('mgsunread').innerHTML = 'hello world'
}

＆＃13;

<button class="btn btn-primary" id="msgbtn">Messages <span id="mgsunread" class="badge badge-light">4</span></button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果用span.innerText = “6”;

替换第3行和第4行，它应该有效

这会将span标记内的文本设置为6。