js节点的创建添加删除
<!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>
这样就生成了这个列表，数据库有多少个显示多少个。
