createElement()作用是在JavaScript中创建一个元素
appendChild()向html元素添加节点
下面是冲浪后改编的例子代码
先插html代码
<body>
<ul>
<li value="1">加载按钮</li>
<li value="2">加载下拉框</li>
<li value="3">加载文本框</li>
</ul>
<div id = "show">例子将在这里进行展示</div>
</body>
<script>
window.onload = function(){ var show = document.getElementById("show");
var ul = document.getElementsByTagName("ul")[0];
var li = ul.childNodes;
for(var i=0; i<li.length; i++){
li[i].onclick = function() {
if(show.childNodes.length > 0){//判断show里面有没有东西
show.removeChild(show.childNodes[0]);//如果有就删掉，完成初始化
//show.innerHTML = '';//这样也能直接删除show的子节点，更方便
}
selectFunction(parseInt(this.getAttribute("value")));//value值是字符串，需要用parseInt()转换成数字，然后传值
}
}
function selectFunction(index){//接收参数并调用相应的函数
switch(index){
case 1:createInput();
break;
case 2:createSelect();
break;
case 3:createText(); }
}
function createInput() {
// show.removeChild(show.childNodes[0]);
var e = document.createElement("input");
e.type = "button";
e.value = "这是加载测试的小例子";
show.appendChild(e);
}
function createSelect(){ var e = document.createElement("select");
e.options[0] = new Option("加载项1","");
e.options[1] = new Option("加载项2","");
show.appendChild(e);
}
function createText(){
var e = document.createElement("input");
e.setAttribute("name","q");
e.setAttribute("value","使用setAttribute");
e.setAttribute("type","text");//使用setAttribute和e.type="text"；效果是一样的，但setAtt是1级dom,兼容性更好
show.appendChild(e);
}
}
</script>
这是效果