<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="box">
</ul>
<script type="text/javascript">
var ul = document.getElementById('box');
// 創建節點
var li1 = document.createElement('li');
var li2 = document.createElement('li');
// // innerText 只設置文本
// // li1.innerText = '<a href="#">123</a>';
// li1.innerHTML = '<a href="#">123</a>';
// li1.setAttribute('class','active');
// console.log(li1.children);
// li1.children[0].style.color = 'red';
// li1.children[0].style.fontSize = '20px';
ul.appendChild(li1);
ul.appendChild(li2);
//
// li2.innerHTML = '第一個';
// ul.insertBefore(li2,li1);
//
// ul.removeChild(li2);
</script>
</body>
</html>
1、增刪改查
1.1創建節點
var ul = document.getElementById('box'); // 創建節點 var li1 = document.createElement('li'); var li2 = document.createElement('li');
ul.appendChild(li1);
ul.appendChild(li2);
1.2設置標簽文本內容
var ul = document.getElementById('box'); // 創建節點 var li1 = document.createElement('li'); var li2 = document.createElement('li'); // innerText 只設置文本 li1.innerText = '<a href="#">123</a>'; ul.appendChild(li1); ul.appendChild(li2);
元素對象.inner文本=‘內容’
var ul = document.getElementById('box'); // 創建節點 var li1 = document.createElement('li'); var li2 = document.createElement('li'); // // innerText 只設置文本 li1.innerText = '<a href="#">123</a>'; li1.innerText = 'mcw'; ul.appendChild(li1); ul.appendChild(li2);
使用兩次，會被覆蓋掉
1.3、給添加的標簽設置屬性和文本並添加子標簽
var ul = document.getElementById('box'); // 創建節點 var li1 = document.createElement('li'); var li2 = document.createElement('li'); li1.innerHTML = '<a href="#">123</a>'; li1.setAttribute('class','active'); console.log(li1.children); li1.children[0].style.color = 'red'; li1.children[0].style.fontSize = '20px'; ul.appendChild(li1); ul.appendChild(li2);
1）創建dom對象 document.getElementById('box');
2)創建標簽對象； document.createElement('li')
3)標簽對象插入文本內容：li1.innerText=‘內容’；
4）標簽對象插入html,插入子標簽： li1.innerHTML = '<a href="#">123</a>';
5）根據索引獲取子標簽位置並設置樣式： li1.children[0].style.color = 'red';
6）將創建的標簽追加進html文檔對象： ul.appendChild(li1);
li1.children只有一個元素，可以索引取值。
1.4、在某個標簽之前插入標簽 ul.insertBefore(li2,li1);
var ul = document.getElementById('box'); // 創建節點 var li1 = document.createElement('li'); var li2 = document.createElement('li'); // // innerText 只設置文本 // li1.innerText = '<a href="#">123</a>'; li1.innerHTML = '<a href="#">123</a>'; li1.setAttribute('class','active'); console.log(li1.children); li1.children[0].style.color = 'red'; li1.children[0].style.fontSize = '20px'; ul.appendChild(li1); li2.innerHTML = '第一個'; ul.insertBefore(li2,li1);//如果li1不存在或沒有追加進去，那么此條不執行
1.5、刪除標簽 文檔對象. r移除孩子（） ul.removeChild(li2);
var ul = document.getElementById('box'); // 創建節點 var li1 = document.createElement('li'); var li2 = document.createElement('li'); li1.innerHTML = '<a href="#">123</a>'; li1.setAttribute('class','active'); console.log(li1.children); li1.children[0].style.color = 'red'; li1.children[0].style.fontSize = '20px'; ul.appendChild(li1); // ul.appendChild(li2); // li2.innerHTML = '第一個'; ul.insertBefore(li2,li1); // ul.removeChild(li2);
2、對屬性，值，節點的操作案例
for循環批量生成標簽：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul li p.name{
color: red;
}
</style>
</head>
<body>
<ul id="box">
</ul>
<script type="text/javascript">
var box = document.getElementById('box');
//從前端獲取后端的數據
var data = [
{id:1,name:'小米8',subName:'你真好',price:98},
{id:2,name:'小米6',subName:'你真好2',price:948},
{id:3,name:'小米4',subName:'你真好3',price:100},
{id:4,name:'小米2',subName:'你真好4',price:928},
{id:5,name:'小米10',subName:'你真好5',price:918}
];
for(var i=0;i<data.length;i++){
var li=document.createElement('li')
box.appendChild(li)
}
</script>
</body>
</html>
將模擬從數據庫拿來的數據放在生成的標簽里，並給標簽寫好css樣式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul li p.name{
color: red;
}
</style>
</head>
<body>
<ul id="box">
</ul>
<script type="text/javascript">
var box = document.getElementById('box');
//從前端獲取后端的數據
var data = [
{id:1,name:'小米8',subName:'你真好',price:98},
{id:2,name:'小米6',subName:'你真好2',price:948},
{id:3,name:'小米4',subName:'你真好3',price:100},
{id:4,name:'小米2',subName:'你真好4',price:928},
{id:5,name:'小米10',subName:'你真好5',price:918}
];
for(var i=0;i<data.length;i++){
var li=document.createElement('li')
li.innerHTML=`<p class="name">${data[i].name}</p>
<p class="subName">${data[i].subName}</p>
<span class="price">${data[i].price}</span>元`;
box.appendChild(li)
}
</script>
</body>
</html>
這樣就生成了這個列表，數據庫有多少個顯示多少個。
