Question

我正在做一个大学项目，我必须遵循老师给出的某些规范。特别是我不能使用innerHTML或InnertText。如何在不使用innerHTML / innerText的情况下替换该代码？

HTML：

<div class = "boardtitle">

    <text>LAST SCORE: </text>

    <div id="lastscore"></div>

</div>

JAVASCRIPT：

function lastScore(num){
     document.getElementById('lastscore').innerText = num;
}

假设有lastScore(3);之类的通话，我只想在HTML页面中查看LAST SCORE:旁边的数字3，我该如何替换它？

提前致谢

Answer 1

正如您对问题的评论中所述，您尚未使用innerHTML，但我认为您无法使用innerText。你走了：

function lastScore(num){
    var el = document.getElementById('lastscore');
    el.appendChild(document.createTextNode(num));
}

HTML元素中的纯文本也是DomNode，它是一种特殊类型，TextNode，只包含文本而没有标记。 document对象还有一个创建此类节点的方法document.createTextNode('some string')，它创建TextNode就像任何其他常规类型的节点一样。因此，您可以使用自定义内容创建TextNode，然后将其附加到元素中。

更新：我没有完全正确地提出您的问题：如果您想将数字放在 LAST SCORE：文本旁边，请使用相同的JS代码，但将ID放在{{ 1}}包含 LAST SCORE：的元素，并删除<text>

Answer 2

如果您只需要在<text>元素值之后附加数字，则可以将lastscore ID添加到<text id="lastscore">LAST SCORE: </text>元素，无需使用额外的 div < / strong>元素<div id="lastscore"></div>

function lastScore(num){ document.getElementById('lastscore').textContent += num; } lastScore(3);

<div class = "boardtitle"> <text id="lastscore">LAST SCORE: </text> </div>

根据评论：然后使用textContent，看看它与innerHTML或innerText的区别在于https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

Answer 3

使用span代替div。你应该得到想要的结果。

<div class = "boardtitle">

    <text>LAST SCORE: </text>

    <span id="lastscore"></span>

</div>

function lastScore(num){
    document.getElementById('lastscore').innerText = num;
}

当您致电LAST SCORE:

时，您会获得lastScore(3);旁边的号码

Javascript代码替代

3 个答案: