javascript 动态插入技术
作者:司徒正美 来源:Ruby's Louvre 发布时间:2009-12-14 20:50:00
最近发现各大类库都能利用div.innerHTML=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势。首先innerHTML会把里面的某些位置的空白去掉,见下面运行框的结果:
另一个可恶的地方是,在IE中以下元素的innerHTML是只读的:col、 colgroup、frameset、html、 head、style、table、tbody、 tfoot、 thead、title 与 tr。为了收拾它们,Ext特意弄了个insertIntoTable。insertIntoTable就是利用DOM的insertBefore与appendChild来添加,情况基本同jQuery。不过jQuery是完全依赖这两个方法,Ext还使用了insertAdjacentHTML。为了提高效率,所有类库都不约而同地使用了文档碎片。基本流程都是通过div.innerHTML提取出节点,然后转移到文档碎片上,然后用insertBefore与appendChild插入节点。对于火狐,Ext还使用了createContextualFragment解析文本,直接插入其目标位置上。显然,Ext的比jQuery是快许多的。不过jQuery的插入的不单是HTML片断,还有各种节点与jQuery对象。下面重温一下jQuery的工作流程吧。
真是复杂的让人掉眼泪!不过jQuery的实现并不太高明,它把插入的东西统统用clean转换为节点集合,再把它们放到一个文档碎片中,然后用appendChild与insertBefore插入它们。在除了火狐外,其他浏览器都支持insertAdjactentXXX家族的今日,应该好好利用这些原生API。


猜你喜欢
- Vue动态创建组件实例并挂载到body方式一import Vue from 'vue'/** * @param Compon
- 本文实例为大家分享了python sort、sort_index的具体代码,供大家参考,具体内容如下对Series进行排序#生成序列objo
- Python中的[1:]意思是去掉列表中第一个元素(下标为0),去后面的元素进行操作,以一个示例题为例,用在遍历中统计个数:题:读入N名学生
- 基本开发环境· Python 3.6· Pycharm相关模块使用import requestsimport timefrom tkinte
- 本文实例为大家分享了JSP学生信息管理系统源码,供大家参考,具体内容如下新建学生信息数据库1.添加记录模块<%@ page conte
- 一、前言在生活中,我们经常会遇到电脑中文件重复的情况。在文件较少的情况下,这类情况还比较容易处理,最不济就是一个个手动对比删除;而在重复文件
- 在进行keras 网络计算时,有时候需要获取输入张量的维度来定义自己的层。但是由于keras是一个封闭的接口。因此在调用由于是张量不能直接用
- 本文实例为大家分享了python实现flappy bird的简单代码,供大家参考,具体内容如下import pygamefrom pygam
- Python 实现tuple和list的转换1.list列表转换为tuple元组temp_list = [1,2,3,4,5]print(t
- 建议有js基础,了解jquery,thinkphp,废话不说多下面就上代码《————HTML————》//thinkphp循环显示把data
- 因工作需要,要将存放在sql server数据库中的数据全部导入到mysql数据库中,在网上搜集相关资料,找到两种方法,现在分别谈谈对他们的
- 前言Java 中最通用的日志模块莫过于 Log4j 了,在 python 中,也自带了 logging 模块,该模块的用法其实和 Log4j
- 如下所示:#!/usr/bin/python# -*- coding:utf8 -*-import xlwtimport osworkboo
- 刚来这个公司,熟悉了环境,老大就开始让我做一个迁移、修改代码的工作,我想说的是,这种工作真没劲~~,看别人的代码、改别人的代码、这里改个变量
- 一、前言Hadoop原理架构本人就不在此赘述了,可以自行百度,本文仅介绍Hadoop-3.1.2完全分布式环境搭建(本人使用三个虚拟机搭建)
- Harris 角点检测算法1. 角点角点是水平方向、垂直方向变化都很大的像素。角点检测算法的基本思想:
- MySQL使用于认证目的的用户名,与Unix用户名(登录名字)或Windows用户名无关。缺省地,大多数MySQL客户尝试使用当前Unix用
- mnist作为最基础的图片数据集,在以后的cnn,rnn任务中都会用到import numpy as npimport tensorflow
- 例子class A(object): def foo(self,x): print "exe
- 本文实例讲述了Python处理XML格式数据的方法。分享给大家供大家参考,具体如下:这里的操作是基于Python3平台。在使用Python处