<!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. cf-786B区间图最短路

    https://www.cnblogs.com/31415926535x/p/11611801.html 偶然看到的这个东西,可以说是第一次见到图论+数据结构的题了,,这题代码很简单,细节处理一下就没 ...

  2. 倾斜动画（SkewTransform）

    Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平.垂直方向的倾斜变化动画效果.我们现实生活中的倾斜变化效果是非常常见的,比如翻书的纸张效果,关门开门的时候门缝 ...

  3. XXL-JOB使用命令行的方式启动python时，日志过多导致阻塞的解决方式

    一.Runtime.getRuntime().exec()的阻塞问题 这个问题也不能算是XXL-JOB的问题,而是Java的Runtime.getRuntime().exec()造成的,Buffere ...

  4. Spring Security 解析(一) —— 授权过程

    Spring Security 解析(一) -- 授权过程   在学习Spring Cloud 时,遇到了授权服务oauth 相关内容时,总是一知半解,因此决定先把Spring Security .S ...

  5. 手写MQ框架（一）-准备启程

    一.背景 很久以前写了DAO框架和MVC框架,前段时间又重写了DAO框架-GDAO(手写DAO框架(一)-从“1”开始,源码:https://github.com/shuimutong/gdao.gi ...

  6. 正则表达式修饰符 i、g、m、s、U、x、a、D、e 等。

    正则表达式中常用的模式修正符有i.g.m.s.U.x.a.D.e 等. 它们之间可以组合搭配使用. i 不区分(ignore)大小写: 例如: /abc/i 可以匹配 abc.aBC.Abc g 全局 ...

  7. WinRAR捆绑木马

    准备好木马文件 server.exe 准备一个小游戏 趣味数学计算 压缩 创建自解压格式压缩文件 自解压选项设置 解压路径设置 设置程序 模式设置 压缩完成 使用 开始玩游戏

  8. procfs、debugfs

    procfs 是进程文件系统(file system) 的缩写,包含一个伪文件系统,用于通过内核访问进程信息 这个文件系统通常被挂载到 /proc 目录.由于 /proc 不是一个真正的文件系统,它也 ...

  9. 笔谈kxmovie开源播放器库的使用

    开源播放器项目 kxmovie(https://github.com/kolyvan/kxmovie),现在仍然是很多刚开始接触播放器开发的程序员的参照范本.以下是我操作kxmovie项目的过程: ( ...

  10. 知识扩展——(转)一篇文章彻底弄懂Base64编码原理

    在互联网中的每一刻,你可能都在享受着Base64带来的便捷,但对于Base64的基础原理又了解多少?今天这篇博文带领大家了解一下Base64的底层实现. 一.Base64的由来 目前Base64已经成 ...