/**
* javascrit原生实现jquery的append()函数
* @param parent
* @param text
*/
function append(parent, text) {
if (typeof text === 'string') {
var temp = document.createElement('div');
temp.innerHTML = text;
// 防止元素太多 进行提速
var frag = document.createDocumentFragment();
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
parent.appendChild(frag);
}
else {
parent.appendChild(text);
}
} // 用法
var html = buildMenu(menuList);
var menuUl = document.getElementById("ul");
var html = '<li>...</li>';
append(menuUl, html);
 

javascrit原生实现jquery的append()函数的更多相关文章

  1. 【JavaScript框架封装】在实现一个自己定义类似于JQuery的append()函数的时候遇到的问题及解决方案

    主要问题: 在刚开始创建了这个函数之后,使用的时候,总是会出现一个问题,就是按照正常步骤给一个ID选择器添加子节点的时候正常,但是到了给一个class选择器的元素添加的时候始终只能添加一个. 下面是我 ...

  2. jquery after append appendTo三个函数的区别

    jq文档的说明是 1.after函数 定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html> & ...

  3. 【转】jQuery on()选择器函数

    on()函数用于为指定元素的一个或多个事件绑定事件处理函数. 此外,你还可以额外传递给事件处理函数一些所需的数据. 从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统 ...

  4. 使用jquery的append(content)方法的注意事项

    append(content)函数:向每个匹配的元素内部追加内容. 如以下示例: 向所有段落中追加一些HTML标记. HTML 代码: <p>I would like to say: &l ...

  5. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  6. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  7. jQuery1.11源码分析(9)-----初始化jQuery对象的函数和关联节点获取函数

    这篇也没什么好说的,初始化jQuery对象的函数要处理多种情况,已经被寒冬吐槽烂了.关联节点获取函数主要基于两个工具函数dir和sibling,前者基于指定的方向遍历,后者则遍历兄弟节点(真的不能合并 ...

  8. jQuery中append()与appendto()用法分析

    本文实例分析了jquery中append()与appendto()的用法.分享给大家供大家参考.具体分析如下: 在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同 ...

  9. [总结]jQuery之常用函数方法参考手册

    w3school参考地址:http://www.w3school.com.cn/jquery/index.asp runoob参考地址:http://www.runoob.com/jquery/jqu ...

随机推荐

  1. Can't find any matching row in the user table

    原因 更改mysql.user表之后,没有使用flush privileges命令来更新权限. 解决方案 使用flush privileges命令更新一下. 问题描述 配置mysql远程登录时,只需要 ...

  2. 使用Hibernate的 isNotEmpty( ) 方法 报错: No result defined .... and result dataAccessFailure

    数据访问失败 出错代码: cardy.add(Restrictions.isNotEmpty("grade.cardtype.cardtype")); try...catch之后发 ...

  3. redis-内存异常 Redis is configured to save RDB snapshots解决

    连接reids获取数据时提示 Redis is configured to save RDB snapshots, but is currently not able to persist on di ...

  4. ka/ks

    1. If dN/dS = 1, amino-acid substitutions may be largely neutral. However, there is also the possibi ...

  5. Linux服务器配置多台虚拟主机

    2016年11月4日15:59:12 LAMP环境 参考:http://blog.itblood.com/nginx-same-ip-multi-domain-configuration.html 在 ...

  6. LINQ函数

    LINQ函数虽然和LINQ语句实现了同样的功能,但LINQ函数使用起来更加快捷.学过数据库的感觉LINQ语句都不难,但语句比较长. 会LINQ函数,才算会LINQ. 1.Where(),结果过滤 Li ...

  7. linux的用户与用户组

    1.上面这个花花绿绿的图片,来自linxu 下etc/passwd文件. 我们来详细的看下这些都值得是什么东西,这些内容都是用冒号来分割的. 2.etc/shadow 3.对比一下这两个文件的权限,为 ...

  8. 502 Bad Gateway深究

    早上收到502报警,设置的报警规则是502错误两分钟超过500就报警. 排障流程: 日志分析系统报障-->查看日志系统日志-->nginx错误日志-->php错误日志-->ph ...

  9. Généralement c'est un mélange qui me devient personnellement

    Parmi mes plus grands problèmes personnels avec maisons de rue conventionnelles est en fait ils sont ...

  10. 一个用纯CSS实现的下拉菜单

    用CSS做下拉列表的特效,代码如下: <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> & ...