<!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. C++工程师养成 每日一题(string使用)

    题目: 题目来源牛客网:https://www.nowcoder.com/practice/f0db4c36573d459cae44ac90b90c6212?tpId 输入两个字符串,从第一字符串中删 ...

  2. 类的练习——python编程从入门到实践

    9-1 餐馆:创建一个名为Restaurant的类,其方法__init__()设置两个属性:restaurant_name和cuisine_type.创建一个名为describe_restaurant ...

  3. modbus汇总

    ModBus协议简介及移植到STM32单片机 https://blog.csdn.net/silent123go/article/details/92440091 Modbus测试工具ModbusPo ...

  4. sql server 压缩日志文件

    USE [master] GO ALTER DATABASE TestDB SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE TestDB SET ...

  5. git 学习笔记 -- 创建标签

    在Git中打标签非常简单,首先,切换到需要打标签的分支上: $ git branch * dev master $ git checkout master Switched to branch 'ma ...

  6. js 不同浏览器的类型判断 navigator.userAgent

    一.通过navigator.userAgent来进行浏览器类型判断 // 判断浏览器内核.手机系统等,使用 browser.userAgent.mobile var browser = { userA ...

  7. 常用 Maven 仓库地址

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/niuzhucedenglu/article ...

  8. maven安装配置 每次都百度,麻烦

    JDK已经安装 1. 下载:https://maven.apache.org/download.cgi 2.  解压 D:\Program Files\maven 配置环境变量 新建环境变量MAVEN ...

  9. Oracle中nlssort()函数排序功能

    转自:https://www.iteye.com/blog/libaxiaoyuan-2199851 Oracle9i之前,中文是按照二进制编码进行排序的.在oracle9i中新增了按照拼音.部首.笔 ...

  10. day 06 预科

    目录 if判断 if判断习题 for循环 for循环习题 微信机器人 if判断 # 一条狗朝你过来了,你会干吗? 判断: 如果狗是大长腿牵来的狗--->打招呼:如果是条疯狗,跑. # if:如果 ...