使用（无框架）JavaScript处理DOM [英] Manipulating DOM with (framework-less) javascript
问题描述
好吧，我已经有一段时间没有使用JQuery了……但是，随着编码的发展，对于无法确定是否提供JQuery的项目，我必须没有它的强大功能。
Ok, I haven't been using JavaScript without JQuery for quite some time now... But, as coding goes, I have to do without it's power for a project where I can't be sure that JQuery is provided.
我要使用JQuery进行的操作如下：
The thing I'm trying to do would be the following using JQuery:
$(document).ready(function() {
$('#myDiv').append('<ul><li>a</li><li>b</li></ul>');
});
现在有了非jQuery的东西，这就是我所拥有的，我真的不明白为什么它不起作用：
Now to the non-jquery thing, this is what I have and I really can't understand why it isn't working:
<html>
<head>
<script type="text/javascript">
function load() {
var s = '<ul><li>a</li><li>b</li></ul>';
var element = document.getElementById("myDiv");
element.innerHtml += s;
}
</script>
</head>
<body onload="load()">
<div id="myDiv"></div>
</body>
</html>
事情是什么都没有发生（尽管该函数被调用）。调用load（）时可能是DOM尚未准备好吗？我隐约记得这段代码在firefox 2.x IE7时代起作用了……
Thing is, nothing happens (the function gets called though). Could it be that the DOM isn't ready when load() is called?. I vaguely remember this code working in the firefox 2.x IE7 era ...
（a）正确的解决方案是什么？
What would be the (a) right solution?
推荐答案
它是 innerHTML 而不是 innerHtml 。请注意大写的 HTML 。更改它，它应该可以正常工作！这是一个工作示例。
It's innerHTML not innerHtml. Notice the upper case HTML. Change that and it should work fine! Here's a working example.
通过使用 innerHtml ，您只需在元素对象上创建一个新属性，并将其值赋予 s 。
By using innerHtml you are simply creating a new property on the element object and giving it the value of s.
这篇关于使用（无框架）JavaScript处理DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
