<!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. 爬虫 request payloa

    小知识点: https://blog.csdn.net/zwq912318834/article/details/79930423

  2. 【EBS】菜单的复制脚本

    DECLARE l_error_flag ); l_menu_rowid ); l_menu_entity_rowid ); l_menu_id NUMBER; l_cnt ; c_new_menu_ ...

  3. golang 之 jwt-go

    主要针对jwt-go快速生成token.和如何取进行介绍,具体详情还请查看 github.com/dgrijalva/jwt-go 生成token package main import ( &quo ...

  4. BZOJ1060或洛谷1131 [ZJOI2007]时态同步

    BZOJ原题链接 洛谷原题链接 看上去就觉得是一道树形\(\mathtt{DP}\),不过到头来我发现我写了一个贪心.. 显然对越靠近根(记为\(r\))的边进行加权贡献越大,且同步的时间显然是从根到 ...

  5. Json schema前奏 关于JSON

    目录 1. 何为 JSON 2. JSON 基本语法 3. JSON值的类型 4. 与XML比较 5. 辅助工具 1. 何为 JSON JSON( JavaScript Object Notation ...

  6. 2019 年在 Raspberry Pi 「树莓派」上运行的 10 个操作系统推荐

    原文:2019 年在 Raspberry Pi 「树莓派」上运行的 10 个操作系统推荐 image Raspberry Pi** 是一款基于 ARM 的单板计算机,默认运行一款称为 Raspbian ...

  7. 在虚拟机Linux安装Redis

    在虚拟机上安装 CentOS 7 安装成功后登录Root用户进入 opt目录,下载Redis. 下载Redis 下载命令: wget http://download.redis.io/releases ...

  8. 执行kubectl create-f replicaset.yaml后k8s是如何工作的

    参考:提高 kubectl 使用生产力[译] 英文原文:https://learnk8s.io/blog/kubectl-productivity/ Kubernetes 架构 Kubernetes ...

  9. springmvc 注解二

    @SessionAttributes @sessionattributes注解应用到Controller上面,可以将Model中的属性同步到session作用域当中. SessionAttribute ...

  10. python基础之猜数字游戏

    #猜数字游戏 import random #impor语句导入random模块 guessor=0; print("#"*30) #输出30个”#“(”############## ...