1.创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
例子：为ul插入li 并且为li元素插入一些文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var oBtn = document.getElementById(‘btn‘);
var oUl = document.getElementById(‘ul1‘);
var oText = document.getElementById(‘text1‘);
oBtn.onclick = function () {
var oLi = document.createElement(‘li‘);
oLi.innerHTML = oText.value;
oUl.appendChild(oLi);
}
};
</script>
</head>
<body>
<input id=‘text1‘ type="text">
<input id="btn" type="button" value="创建li">
<ul id="ul1">
</ul>
</div>
</body>
</html>
效果：
appendChild(节点) 追加一个节点，每次都在尾部追加。
2.插入元素
insertBefore(节点，原有节点) 在已有元素前插入
例子：倒序插入li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var oBtn = document.getElementById(‘btn‘);
var oUl = document.getElementById(‘ul1‘);
var oText = document.getElementById(‘text1‘);
var aLi = document.getElementsByTagName(‘li‘);
oBtn.onclick = function () {
var oLi = document.createElement(‘li‘);
oLi.innerHTML = oText.value;
if(aLi.length > 0){
oUl.insertBefore(oLi,aLi[0]);
}else {
oUl.appendChild(oLi);
}
}
};
</script>
</head>
<body>
<input id=‘text1‘ type="text">
<input id="btn" type="button" value="创建li">
<ul id="ul1">
</ul>
</div>
</body>
</html>
效果：
原文：http://www.cnblogs.com/shuiyin/p/6839758.html