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