动态添加元素

一、js 动态添加元素div

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div id= "parent" ></div>   　　 function addElementDiv(obj) { 　　　　 var parent = document.getElementById(obj);   　　　　 //添加 div 　　　　 var div = document.createElement( "div" );   　　　　 //设置 div 属性，如 id 　　　　div.setAttribute( "id" , "newDiv" );   　　　　div.innerHTML = "js 动态添加div" ; 　　　　parent.appendChild(div); 　　}

调用：addElementDiv("parent");

二、js 动态添加li

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<ul id= "parentUl" ><li>原li</li></ul>   　　 function addElementLi(obj) { 　　　　 var ul = document.getElementById(obj);   　　　　 //添加 li 　　　　 var li = document.createElement( "li" );   　　　　 //设置 li 属性，如 id 　　　　li.setAttribute( "id" , "newli" );   　　　　li.innerHTML = "js 动态添加li" ; 　　　　ul.appendChild(li); 　　}

调用：addElementLi("parentUl");

三、js 动态添加元素img

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<ul id= "parentUl" ></ul>   　　 function addElementImg(obj) { 　　　　 var ul = document.getElementById(obj);   　　　　 //添加 li 　　　　 var li = document.createElement( "li" );   　　　　 //添加 img 　　　　 var img = document.createElement( "img" );   　　　　 //设置 img 属性，如 id 　　　　img.setAttribute( "id" , "newImg" );   　　　　 //设置 img 图片地址 　　　　img.src = "/images/prod.jpg" ;   　　　　li.appendChild(img); 　　　　ul.appendChild(li); 　　}

调用：addElementImg("parentUl");

转载于:https://www.cnblogs.com/niuniui/p/8592667.html