DOM的新增示例

<script language="JavaScript">
window.onload = function(){ //createDocumentFragment()方法,它的作用是创建一个文档碎片,
//把要插入的新节点先附加在它上面,然后再一次性添加到document中
var body = document.body;
var len = 100;
var i = 0;
var flagment = document.createDocumentFragment();//使用fragment来提高性能
var ul = document.createElement('ul');
var li;
var textNode; console.log('flagment',flagment);
body.appendChild(ul);
for(; i < len; i++){
li = document.createElement('li');
textNode = document.createTextNode(i + 1);
li.appendChild(textNode); flagment.appendChild(li);
}
console.log('flagment',flagment);
ul.appendChild(flagment);
}
</script>

JS基础(一)dom小实例的更多相关文章

  1. 【2017-03-28】JS基础、DOM操作

    一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...

  2. JavaScript (JS)基础:DOM 浅析 (含数组Array、字符串String基本方法解析)

    ①文本对象document: 例如:document.getElementById()    只获取一个对象          document.getElementsByTagName()   获取 ...

  3. jquery VS Dom(小实例单选-多选-反选)

    一直以来大家对jquery评价莫过于六个字 “吃得少,干的多” ,应用实例让大家看看这款牛到爆的插件能帮我们做什么,话不多说,直接加码 <!DOCTYPE html> <html l ...

  4. python: DOM 小实例

    一.全选 全部取消  反选 全选:选择指定的所有项目. 全部取消: 取消所有选定的项目. 反选: 选择未选定的,之前已选定的则取消. <!DOCTYPE html> <html la ...

  5. js基础例子dom+原型+oop基础知识记录01

    //oo:概念是计算机中对于现实世界的理解和抽象的方法 //由计算机利用编程技术发展到现在的产物 //面向对象几要素 //对象:由属性和方法组成的集合 //属性:保存数据,存储在对象内存空间中的唯一的 ...

  6. js基础之DOM中元素对象的属性方法

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    ...

  7. js基础篇(dom操作,字符串,this等)

    首先我们来看这样一道题 <div id='foo' class='aa bb cc'></div>写出如何判断此div中是否含有aa(注:aa成立,aaa不成立) 首先,我们一 ...

  8. 【JS基础】DOM操作

    appendChild() //向节点添加最后一个子节点 createElement() //创建元素节点 createTextNode() //创建文本节点,字符串值

  9. JS基础回顾,小练习(实现each方法)

    function each(arr, fn) { for(var i=0;i<arr.length;i++){ fn(arr[i],i); } } var arr = ['java', 'c', ...

随机推荐

  1. unigui+fastReport实现web打印方案

    近日单位需要用到会议通知单的打印功能,故引出篇. unigui是delphi环境下快速开发web应用的优秀工具,不再赘述,下面直接记录使用搭配使用,基本逻辑就是: unigui实现数据录入和浏览的we ...

  2. 新FSM的一些思路

    好久之前写过一篇关于状态机的小例子,可以看这里http://www.cnblogs.com/mawanli/p/5966080.html,这篇博客首先感谢需要感谢当时看到凉鞋的笔记博客, 凉鞋的博客地 ...

  3. Key-Value 数据库简介

    1.Aerospike 官方网站:https://www.aerospike.com/ Aerospike是一个以分布式为核心基础,可基于行随机存取内存中索引.数据或SSD存储中数据的数据库. Aer ...

  4. Eclipse 中构建 Maven 项目的完整过程 - 动态 Web 项目

    进行以下步骤的前提是你已经安装好本地maven库和eclipse中的maven插件了(有的eclipse中已经集成了maven插件) 一.Maven项目的新建 1.鼠标右键---->New--- ...

  5. css3动画:transition和animation

    概述 之前写过css3 动画与display:none冲突的解决方案,但是最近却发现,使用animation效果比transition好得多,而且不和display:none冲突.下面我把相关新的记录 ...

  6. 使用webmagic爬虫对百度百科进行简单的爬取

    分析要爬取的网页源码: 1.打开要分析的网页,查看源代码,找到要爬取的内容: (选择网页里的一部分右击审查元素也行) 2.导入jar包,这个就直接去网上下吧: 3.写爬虫: package com.g ...

  7. 【PHP篇】数组

    1.简介:数组存储方式是键值对 2.声明:$数组变量名=array(2,3,9,3,“546”,“yy”=>”hhhh”,100=>”uu100”): 3.下标注意:可为“字符串”或者整数 ...

  8. Flask依赖和启动流程回顾

    flask 有两个核心依赖库:werkzeug 和 jinja,而 werkzeug 又是两者中更核心的. werkzeug werkzeug负责核心的逻辑模块,比如路由.请求和应答的封装.WSGI ...

  9. 使用 SonarQube 来分析 .NET Core 项目代码问题

    0.介绍 Sonar 是一款开源的代码分析工具,可能有很多人已经用过,本篇文章主要是讲解如何在 Docker 里面安装 Sonar 并且用其来分析 .Net Core 项目. Sonar 是一个用于代 ...

  10. Android--UI之Gallery

    前言 这篇博客讲解一下Android开发中,Gallery控件的使用,这是一个画廊视图,用于展示一组图片,用固定在中间位置的水平滚动列表显示列表项的视图.Android最新的API文档中了解到,在An ...