js节点的创建添加删除
2024-10-21 12:49:28
<!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[].style.color = 'red';
li1.children[].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[].style.color = 'red';
li1.children[].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[].style.color = 'red';
li1.children[].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:,name:'小米8',subName:'你真好',price:},
{id:,name:'小米6',subName:'你真好2',price:},
{id:,name:'小米4',subName:'你真好3',price:},
{id:,name:'小米2',subName:'你真好4',price:},
{id:,name:'小米10',subName:'你真好5',price:}
];
for(var i=;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:,name:'小米8',subName:'你真好',price:},
{id:,name:'小米6',subName:'你真好2',price:},
{id:,name:'小米4',subName:'你真好3',price:},
{id:,name:'小米2',subName:'你真好4',price:},
{id:,name:'小米10',subName:'你真好5',price:}
];
for(var i=;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>
这样就生成了这个列表,数据库有多少个显示多少个。
最新文章
- iOS 开发总结(上)
- 设计模式-装饰器模式(Decrator Model)
- .netWeb方向:语言+技术
- Microsoft JET Database Engine (0x80004005)
- Sass用法指南_20151109笔记
- centos安装memcache与telnet
- Hdu 3887 Counting Offspring \ Poj 3321 Apple Tree \BZOJ 1103 [POI2007]大都市meg
- js 取消listbox选中的项
- chapter8_2 预编译
- ASP.NET MVC4 微信公众号开发之网页授权(一):搭建基础环境
- Laravel 5.2 教程 - 队列
- 在自学java路上遇上的南墙
- 读《图解HTTP》有感-(与HTTP协作的WEB服务器)
- 2018-2019-2 网络对抗技术 20165304 Exp3 免杀原理与实践
- springboot07-security
- Hbase 系统架构(zhuan)
- Qt QGraphicsItem 绕中心旋转、放缩
- Netflix中的负载均衡策略
- H01-Linux系统中搭建Hadoop和Spark集群
- git如何到精通