简单的innerHTML更新不起作用[重复]

Posted 2023-05-07

【中文标题】简单的innerHTML更新不起作用[重复]

【英文标题】：Simple innerHTML update not working [duplicate]

【发布时间】：2013-11-07 09:52:38

【问题描述】：

长话短说，我正在改进现有的注册表单以执行简单的“你是人类吗”检查。简单的东西（人们会认为）。我什至还没有找到好东西，因为我似乎无法在页面上设置几个span 元素的innerhtml。

这是精简后的代码...

<form method="post" action="register2.php">Please verify that you are human below...
    <br/> <span id="num1"></span> X
    <input id="num2" style="width:20px" /> equals <span id="answer"></span>

    <br>
    <input id="submit" type="submit" value="Register" disabled="disabled" />
</form>

还有精简后的脚本...

$('#submit').attr("disabled", "disabled");

var num1 = Math.floor((Math.random() * 11));
var num2 = Math.floor((Math.random() * 11));
var answer = num1 * num2;

$('#num1').innerHTML = "" + num1;
$('#answer').innterHTML = "" + answer;

此时...我只想看到最后两行设置正确的表单元素，以便我可以继续处理验证功能。我这里一定有错字或逻辑错误……有什么想法吗？

这是小提琴：http://jsfiddle.net/2e9Xc/

【问题讨论】：

只是好奇，既然您使用的是 jQuery，为什么还要使用 .innerHTML 而不是 .html()？

使用 .html('value') 代替。

Grrr...谢谢大家。而已。今天早上一定是在放屁。

每个为我投反对票的人为什么没有理由？

【参考方案1】：

.innerHTML 是 DOM 元素的属性。

document.getElementById('num1').innerHTML = "" + num1;

html() 是要使用的 jQuery 函数，而不是 innerHTML：

$('#num1').html(num1);

【讨论】：

将$('#num1').html("" + num1); 更新为$('#num1').html(num1);，我会为你加1。检查我的答案以了解我的意思。

@imsiso 是的，我想没有必要。

【参考方案2】：

用途：

$('#num1').html(num1);
$('#answer').html(answer);

由于您已经使用 .html() 加载了 jQuery，因此最好。

见：http://api.jquery.com/html/

如果你坚持使用innerHTML，你需要像这样从jQuery对象中获取一个合适的DOM对象：

$('#num1')[0].innerHTML = "" + num1;
$('#answer')[0].innterHTML = "" + answer;

【讨论】：

+1 好答案 + 你在.html() 中没有使用过(string)

【参考方案3】：

您不要在 JQuery 对象上使用 InnerHTML。您改用html() 方法。像这样：

HTML

<form method="post" action="register2.php">Please verify that you are human below...
    <br/> <span id="num1"></span> X
    <input id="num2" style="width:20px" /> equals <span id="answer"></span>

    <br>
    <input id="submit" type="submit" value="Register" disabled="disabled" />
</form>

JavaScript

$('#submit').attr("disabled", "disabled");

var num1 = Math.floor((Math.random() * 11));
var num2 = Math.floor((Math.random() * 11));
var answer = num1 * num2;

$('#num1').html(num1);
$('#answer').html(answer);

JSFiddle

http://jsfiddle.net/2e9Xc/1/

【参考方案4】：

随便用

$('#num1').html("" + num1);

.html() 是最佳选择。