html代码块
<!DOCTYPE html>
<html >
<head >
<meta charset ="utf-8" >
<title > **javaScript动态添加Li元素**</title >
<style type ="text/css" >
ul li {list-style :none ;display :block ;text-align :left ;}
ul li span {display :inline-block ;margin-top :5 px ;margin-right :35 px ;}
</style >
<script type ="text/javascript" >
</script >
<body >
//此处为ul动态添加li元素
<ul id ="J_List" >
</ul >
</body >
</html >
js动态添加Li元素代码(方法1)
var userName="Tom";
var userEamil="12345678@qq.com";
var userPhone="12345678910";
//方法1:用innerHTML
document.getElementById("J_List").innerHTML+="<li class =\"newLi\" > <span > "+_userName+"<\ /span > <span > "+userEamil+"<\ /span > <span > "+userPhone+"<\ /span > <span > <input type =\"button\" value =\"删除\" onclick =\"this.parentNode.parentNode.parentNode.removeChild
(this.parentNode.parentNode )\" \/> <\ /span > <\ /li > ";
js动态添加Li元素代码(方法2)
function addLi (useName,useEamil,usePhone) {
var li_1=document.createElement("li" );
li_1.setAttribute("class" ,"newLi" );
addSpan(li_1,userName);
addSpan(li_1,userEamil);
addSpan(li_1,userPhone);
addDelBtn(li_1);
document.getElementById("J_List" ).appendChild(li_1);
}
function addSpan (li,text) {
var span_1=document.createElement("span" );
span_1.innerHTML=text;
li.appendChild(span_1);
}
function addDelBtn (li) {
var span_1=document.createElement("span" );
var btn=document.createElement("button" );
btn.setAttribute("type" ,"button" );
btn.setAttribute("class" ,"delBtn" );
btn.setAttribute("onclick" ,"delBtnData(this)" );
btn.innerHTML="删除" ;
span_1.appendChild(btn);
li.appendChild(span_1);
}
function delBtnData (obj) {
var ul=document.getElementById("J_List" );
var oLi=obj.parentNode.parentNode;
ul.removeChild(oLi);
}
知识点:innerHTML(需注意双引号”或\ 需用 / 转义)。 知识点:createElement创建元素,setAttribute设置元素属性,innerHTML设置元素值,appendChild添加元素,parentNode获取父节点(parentNode是W3C标准的,parentElement 只在IE中可用. ),removeChild删除子节点。