<!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. Microsoft OLE DB Provider for Oracle 在哪个安装包中

    http://www.oracle.com/technetwork/database/windows/downloads/utilsoft-098155.html oracle odbc downlo ...

  2. 取消Windows server 关机提示备注的方法

    打开“开始”-“运行”,在“打开”一栏中输入“gpedit.msc”命令打开组策略编辑器,依次展开“计算机配置”→“管理模板”→“系统”,双击右侧窗口出现的“显示‘关闭事件跟踪程序’”,将“未配置”改 ...

  3. GAN代码实战

    batch normalization 1.BN算法,一般用在全连接或卷积神经网络中.可以增强整个神经网络的识别准确率以及增强模型训练过程中的收敛能力2.对于两套权重参数,例如(w1:0.01,w2: ...

  4. MySQL必知必会3

    创建和操纵表 创建表 输入 CREATE TABLE customers ( cust_id int NOT NULL AUTO_INCREMENT, cust_name char(50) NOT N ...

  5. DjangoRestFramework学习二之序列化组件、视图组件

    本节目录 一 序列化组件 二 视图组件 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 序列化组件 首先按照restful规范咱们创建一些api接口,按照下面这些形式写吧: ...

  6. day34——僵尸进程和孤儿进程、互斥锁、进程之间的通信

    day34 僵尸进程和孤儿进程 基于unix环境(linux,macOS) 主进程需要等待子进程结束之后,主进程才结束 主进程时刻监测子进程的运行状态,当子进程结束之后,一段时间之内,将子进程进行回收 ...

  7. InnoDB的MVCC实现原理

    InnoDB的MVCC,是通过在每行记录后面保存两个隐藏的列来实现的. 这两个列,一个保存了行的创建时间,一个保存了行的过期时间(删除时间).当然存储的并不是实际时间,而是系统版本号(sytem ve ...

  8. Mybatis基于xml的动态sql实现

    动态sql可以很方便的拼接sql语句,主要用于复合条件查询: 主要通过这几个标签实现: if 标签: where 标签 choose标签: foreach标签: if 标签: <select i ...

  9. String 字符串的==和eqauls区别

    1.对于基本类型来说,==比较的是数据的值,equals方法也是数据的值: 对于引用类型来说,==比较的是引用的地址,equals方法比较的是对象的内容. 2.String是引用类型,用“=”创建字符 ...

  10. 可分离滤波器设计高斯滤波 CUDA程序优化， 实验记录

    环境:RTX2060 ,1920X1080p ,循环10次, kernal_size=8 一 .测试前128个线程拷贝到dst数据的性能  ,只测试行卷积, block=(128+2r)X1 1. 使 ...