<!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>

这样就生成了这个列表,数据库有多少个显示多少个。

js节点的创建添加删除的更多相关文章

  1. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

  2. dir(dict)|字典的创建-添加-删除-修改-判断存在-取值等相关操作

    dir(dict) ####字典操作:创建-添加-删除-修改-判断存在-取值 #(一)创建字典: {} .等号. zip(). [(),()] #1.创建空字典 dict0 = {} #2.等号创建 ...

  3. js表格上下移动添加删除

    html部分 <div onclick='fn()'>加</div> <table width="250" border="1" ...

  4. SharePoint 服务器端对象模型操作用户组(创建/添加/删除)

    摘要:几个操作SharePoint用户组的方法,已经测试通过,但是没有提升权限,如果没有权限的人操作,需要提升权限(提权代码附后).大家需要的话,可以参考下,写在这里也给自己留个备份~~ //创建用户 ...

  5. CentOS7下swap分区创建(添加),删除以及相关配置

    在添加swap分区之前我们可以了解下当前系统swap是否存在以及使用情况,可用: 1. free –h 或 swapon –s 了解硬盘使用情况(一般/dev/vda1为挂载硬盘): 1. df –h ...

  6. JQ DOM元素 创建 添加 删除

    创建元素 // 创建元素节点 $('<p></p>'); // 创建属性节点 $('<p class="wow"></p>'); / ...

  7. js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...

  8. js数组指定位置添加删除

    示例参考:http://www.w3school.com.cn/jsref/jsref_splice.asp

  9. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

随机推荐

  1. [LeetCode] 531. Lonely Pixel I 孤独的像素 I

    Given a picture consisting of black and white pixels, find the number of black lonely pixels. The pi ...

  2. ssh登录服务器提示错误no hostkey alg

    ssh登录服务器提示错误no hostkey alg ssh root@192.168.1.100 -vvv 提示失败: no hostkey alg 登录到192.168.1.100服务器 rm - ...

  3. Django文档阅读之模型

    模型 模型是您的数据唯一而且准确的信息来源.它包含您正在储存的数据的重要字段和行为.一般来说,每一个模型都映射一个数据库表. 基础: 每个模型都是一个 Python 的类,这些类继承 django.d ...

  4. 如何在Linux中结合示例使用'cat'和'tac'命令

    上一篇我们讲到了cat的使用示例:https://www.cnblogs.com/WeiLian1024/p/11863057.html 本篇我们将继续延续Cat讲讲Tac 本文是我们讲讲Linux技 ...

  5. linux线程间同步方式总结梳理

    线程间一般无需特别的手段进行通信,由于线程间能够共享数据结构,也就是一个全局变量能够被两个线程同时使用.只是要注意的是线程间须要做好同步! 使用多线程的理由: 1. 一个是和进程相比,它是一种非常&q ...

  6. react-native-typescript-项目环境搭建

    1.yarn global add create-react-native-app //全局安装 2.create-react-native-app 项目名称 3.yarn add typescrip ...

  7. 你应该掌握linux中Bash命令的一些快捷方式

    在本文中,我们将分享许多对任何Linux用户都有用的Bash命令行快捷方式.这些快捷方式可以快速地执行某些动作,例如访问和运行先前执行的命令,打开编辑器,在命令行上编辑/删除/更改文本,移动光标,控制 ...

  8. centos7简单部署rancher

    rancher官网文档地址 https://www.cnrancher.com/docs/rancher/v2.x/cn/overview/ 准备机器 两台虚拟机 192.168.56.100 192 ...

  9. 网页中插入Flash动画(.swf)代码和常用参数设置

    我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少人了解这些直接由DW生成的代码呢?其实我接触flash player标 ...

  10. PXC安装部署

    安装依赖与注意事项:   1. rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm 1 ...