一、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");