想在div里面往span后面追加这个ul
<body>
<div id="haha">
<span></span>
</div>
<script>
window.onload = function () {
var s = '<ul><li>a</li><li>b</li></ul?';
var ha = document.getElementById('haha');
ha.innerHTML += s;
}
</script>
</body>可以使用innerHTML += 字符串的方式
如果innerHTML = 字符串了，那就覆盖了，+=就可以继续往后追加；
但是在实际的生产中一般不这么写，以下是实际中常用的写法
<body>
<div id="haha">
<span></span>
</div>
<script>
window.onload = function () {
var s = document.createElement('ul');
for (var i = 0; i < 3; i++) {
var temp = document.createElement('li');
temp.innerHTML = 'a';
s.appendChild(temp);
}
var ha = document.getElementById('haha');
ha.appendChild(s);
}
</script>
</body>总结：
createElement和nnerHTML的区别：
在实际中我们一般使用createElement的方式，因为createElement的方式是直接操作dom树，而innerHTML是需要解析字符串的，其间有一个解析的过程；
性能上，createElement和innerHTML在很多浏览器中是有差别的；
如果页面小还好，但要是有大量内容和节点的页面，性能上的差距就会体现出来了；
chrome有着非常优秀的js引擎，所以性能比较好，在createElement和innerHTML的方面的差距稍小一些；但是放到火狐或者ie之类的浏览器上，差距就会大一些。
在插入内容少的时候，实际上现代浏览器innertHTML速度要快一些，但是由于都很快，所以这点微弱的差距就可以忽略不计了；
而且innerHTML和createElement还有一个区别
innerHTML里面要是带有script脚本的话，这个脚本是不执行的，但是createElement会执行。
文档碎片（性能优化）
按照以上第二种方式，可以接受，但是要向document中添加大量数据时(比如1w条)，如果像以下的代码一样，逐条添加节点，这个过程就可能会十分缓慢。
//反例
for(var i=0;i<5;i++){
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
}当数据过大（10000条）时，
//反例 （数据过大时）
var oDiv = document.createElement("div");
for(var i=0;i<10000;i++){
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
oDiv.appendChild(op);
}
document.body.appendChild(oDiv);解决问题，文档碎片createDocumentFragment()
为了解决这个问题，我们可以引入createDocumentFragment()方法，它的作用是创建一个文档碎片，把要插入的新节点先附加在它上面，然后再一次性添加到document中。代码如下：
代码如下:
//先创建文档碎片
var oFragmeng = document.createDocumentFragment();
for(var i=0;i<10000;i++){
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
//先附加在文档碎片中
oFragmeng.appendChild(op);
}
//最后一次性添加到document中
document.body.appendChild(oFragmeng);ps: 在ie，firefox下性能明显得以提高,这个优化跟循环添加html代码类似.