<!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. Django框架之第五篇（模板层） --变量、过滤器、标签、自定义标签、过滤器，模板的继承、模板的注入、静态文件

    模板层 模板层就是html页面,Django系统中的(template) 一.视图层给模板传值的两种方法 方式一:通过键值对的形式传参,指名道姓的传参 n = 'xxx'f = 'yyy'return ...

  2. Linux下signal信号汇总

    SIGHUP /* Hangup (POSIX). */ 终止进程 终端线路挂断 SIGINT /* Interrupt (ANSI). */ 终止进程 中断进程 Ctrl+C SIGQUIT /* ...

  3. GoLang基础数据类型---字典

    Map 是 Go 中的内置类型,它将键与值绑定到一起.可以通过键获取相应的值. 如何创建 map? 可以通过将键和值的类型传递给内置函数 make 来创建一个 map.语法为:make(map[Key ...

  4. Flanne

    容器面临的问题 物理机A上的应用A看到的IP地址是容器A的,是172.17.0.2,在物理机B上的应用B看到的IP地址是容器B的,不巧也是172.17.0.2,当它们都注册到注册中心的时候,注册中心就 ...

  5. ：阿里巴巴 Java 开发手册 （十一）工程结构

    (一) 应用分层 1. [推荐]图中默认上层依赖于下层,箭头关系表示可直接依赖,如:开放接口层可以依赖于 Web 层,也可以直接依赖于 Service 层,依此类推:  开放接口层:可直接封装 Se ...

  6. Python基础知识(五)------字典

    Python基础知识(四)------字典 字典 一丶什么是字典 ​ dict关键字 , 以 {} 表示, 以key:value形式保存数据 ,每个逗号分隔 ​ 键: 必须是可哈希,(不可变的数据类型 ...

  7. OpenGL ES教程系列（经典合集）

    为了搞透播放器的开发,花了些时间收集这些资料,虽然我已经搞定opengles渲染视频的内容,但是想玩玩opengles,往深里玩,图像处理这块是个好的方向,所以opengles是值得好好学的.   O ...

  8. 最佳移动端h5自适应rem适配方案

    一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...

  9. package-lock.json的作用（转载）

    package-lock.json 文件的作用  来源 :https://www.cnblogs.com/kugeliu/p/9153775.html npm5之后安装文件之后会多出一个package ...

  10. CentOS 6 使用 tptables 打开关闭防火墙与端口

    开启访问端口 Linux版本:CentOS release 6.9 此处以nginx访问端口8081为例 编辑:vi /etc/sysconfig/iptables 添加:-A RH-Firewall ...