<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>create系列创建节点的方法</title>

    <!--

        document.createElement("元素a");创建元素节点a

        document.createTextNode("文本a");创建文本节点a

        document.createDocumentFragment();创建文档片段

        document.createComment("注释a");创建注释a

        a.appendChild(b);使b作为子节点附加在a节点上

        扩展知识：父元素a.insertBefore(节点b,节点c);

                解读：将节点b插入节点a内节点c的前面

     -->

</head>

<body>

    <ul id="ul1"></ul>

    <script>

        var ul=document.getElementById("ul1");//获取无序列表

        var li=document.createElement("li");//创建列表项

        var text=document.createTextNode("text");//创建文本

        var fragment=document.createDocumentFragment();//创建文档片段

        var comment=document.createComment("js 中创建的注释");//创建注释

        li.appendChild(text);//将文本附加给列表项

        fragment.appendChild(li);//将列表项附加给文档片段

        ul.appendChild(fragment);//将文档碎片附加给无序列表

        document.body.insertBefore(comment,document.body.firstChild);//将创建的注释安插在body的第一行

    </script>

</body>

</html>

create系列创建节点的方法的更多相关文章

  1. JS DOM创建节点

    DOM节点操作之增删改查 document.write() 可以向文档中添加节点 但是有个致命问题,会把文档原有的节点全部清空 因此不推荐使用 <!DOCTYPE html> <ht ...

  2. 创建节点--DOM树

    创建节点 快捷键:innerhtml outerhtml innertext outertext ==============创建节点方法有两种:============== <script s ...

  3. JQuery_DOM 节点操作之创建节点、插入节点

    一.创建节点 为了使页面更加智能化,有时我们想动态的在html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点 <script type="text/javasc ...

  4. Zookeeper命令行操作(常用命令；客户端连接；查看znode路径；创建节点；获取znode数据，查看节点内容，设置节点内容，删除节点；监听znode事件；telnet连接zookeeper)

    8.1.常用命令 启动ZK服务 bin/zkServer.sh start 查看ZK服务状态 bin/zkServer.sh status 停止ZK服务 bin/zkServer.sh stop 重启 ...

  5. js···DOM2动态创建节点

    1.生成节点的方法  document.createElement(“div”) 2.插入节点的方法   父元素.appendChild(新节点) 在父节点中的子节点后面插入新的节点 3.在指定的位置 ...

  6. 11-15 dom 动态创建节点

    1.生成节点的方法  document.createElement(“div”) 2.插入节点的方法   父元素.appendChild(新节点) 在父节点中的子节点后面插入新的节点 3.在指定的位置 ...

  7. jQuery操作DOM节点的方法总结

    1.parent():获得当前匹配元素集合中每个元素的父元素,该方法只会向上一级对 DOM 树进行遍历 $('li.item-a').parent().css('background-color', ...

  8. javascript创建节点的事件绑定

    javascript创建节点的事件绑定 timeupdate事件是<video>中用来返回视频播放进度的事件,绑定在<video>标签返回视频播放位置(每秒计). 现video ...

  9. 关于document的节点；用Dom2创建节点；

    一.关于节点 1.节点树状图 document>documentElement>body>tagName 2.节点类型 元素节点(标签).文本节点(文本).属性节点(标签属性) 3. ...

随机推荐

  1. day25——私有成员、类方法、静态方法、属性、isinstance和issubclass的区别

    day25 类的私有成员 当你遇到重要的数据,功能(只允许本类使用的一些方法,数据)设置成私有成员 python所有的私有成员都是纸老虎,形同虚设 类从加载时,只要遇到类中的私有成员,都会在私有成员前 ...

  2. 玩机之Honor_V10

    作为一个热爱手机的Geek,自然是经历了很多的刷机和改装手机的经验,当然翻车的经验也是有的.一般来说的折腾手机都是在遇到某一版本使用以及各方面都比较稳定的时候才会选择让手机停留在哪一版本.下面我就来分 ...

  3. chrome Network 过滤和高级过滤

    转自:https://blog.csdn.net/tengdazhang770960436/article/details/90644523

  4. 2017-07-25 PDO预处理以及防止sql注入

    首先来看下不做任何处理的php登录,首先是HTML页面代码 <html> <head><title>用户登录</title></head> ...

  5. js 将数字转换成中文大写

    //完成将 toChineseNum, 可以将数字转换成中文大写的表示,处理到万级别,例如 toChineseNum(12345),返回 一万二千三百四十五. const toChinesNum = ...

  6. Mysql中类似于oracle中nvl()函数的ifnull()函数

    IFNULL(expr1,expr2)  如果expr1不是NULL,IFNULL()返回expr1,否则它返回expr2.IFNULL()返回一个数字或字符串值,取决于它被使用的上下文环境.  my ...

  7. 京信通信成功打造自动化工厂（MES应用案例）

    企业介绍: 京信通信成立于1997年,是一家集研发.生产.销售及服务于一体的移动通信外围设备专业厂商,致力于为客户提供无线覆盖和传输的整体解决方案,于2003年在香港联交所主板上市(2342.HK), ...

  8. Hive函数集锦

    一.内置运算符 1关系运算符 2.算术运算符 3.逻辑运算符 4.复杂类型函数 5.复杂类型函数应用

  9. c# 泛型study

    1.引用类型约束:  类型实参包含任何类,接口,数组,委托,或者是已知是引用类型的另一个类型参数 class demo<T> where T:class 有效的封闭区间demo<St ...

  10. selenium窗口句柄以及对话框处理

    多窗口.句柄: 1.获取当前句柄:driver.current_window_handle 2.获取所有句柄:driver.window_handles 3.切换句柄:driver.switch_to ...