appendChild 主要是用来追加节点 插入到最后

window.onload = function(){
var ul2 = document.getElementById('ul2');
var oli = document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++){
ul2.appendChild(oli[i]);
}

}

<h3>讲Id为ul1的内容插入到ul2里面</h3>
  <ul id="ul1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  </ul>
  <ul id="ul2">
  </ul>

把ul1内容插入到ul2里面,这个其实是搬家而不是复制 这个要切记

可以查看一下效果

为什么会出现这样的效果 是因为 循环的时候 由于不停的搬家 导致length 在改变 如果用for的话 这样开始的length 已经被固定啦 所以出现问题,所以说要改成

while(oli.length){

ul2.appendChild(oli[0]);

}

这样的都是插入第一条 所以就成功啦 大家可以试试

js原生appendChild的bug的更多相关文章

  1. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  2. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  3. 15、js 原生基础总结

    Day1 一.什么是JS?   ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...

  4. JS原生实现视频弹幕Demo(仿)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. JS原生ajax

    原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...

  6. JS原生评分组件

    JS原生评分组件 <html> <head> <meta http-equiv="Content-Type" content="text/h ...

  7. js原生实现轮播图效果(面向对象编程)

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  8. js原生高逼格插件

    如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...

  9. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

随机推荐

  1. 嵌入式 使用udev高效、动态地管理Linux 设备文件

    本文以通俗的方法阐述 udev 及相关术语的概念.udev 的配置文件和规则文件,然后以 Red Hat Enterprise Server 为平台演示一些管理设备文件和查询设备信息的实例.本文会使那 ...

  2. XML Schema 简介

    XML Schema 是基于 XML 的 DTD 替代者. XML Schema 可描述 XML 文档的结构. XML Schema 语言也可作为 XSD(XML Schema Definition) ...

  3. 【LeetCode】66 & 67- Plus One & Add Binary

    66 - Plus One Given a non-negative number represented as an array of digits, plus one to the number. ...

  4. PermGen space Eclipse 终极解决方案

    1.选中项目右键 run or debug configurations... 2.在 VM arguments 加入  -Xms128m -Xmx512m -XX:PermSize=64M -XX: ...

  5. 基于select模型的udp客户端实现超时机制

    参考:http://www.cnblogs.com/chenshuyi/p/3539949.html 多路选择I/O — select模型 其思想在于使用一个集合,该集合中包含需要进行读写的fd,通过 ...

  6. Windows平台分布式架构-负载均衡(高并发)

    缘由 单纯想在winodows平台部署分布式程序,微软在IIS扩展的介绍中有涉及到Application Request Router + Web Farm + Url Rewriter可以实现分布式 ...

  7. Eclipse配置信息

    1.Eclipse VM arguments的保存位置: .metadata\.plugins\org.eclipse.debug.core\.launches (使用文件比较工具找出配置信息的保存位 ...

  8. c++ List、Vector、Stack、Queue使用

    一.List使用 引入头文件#include <list> List基本函数Lists将元素按顺序储存在链表中. 与 向量(vectors)相比, 它允许快速的插入和删除,但是随机访问却比 ...

  9. C#修改下拉框选项的高度

    重写ListBox.DrawItem事件处理,别忘记将ListBox.DrawMode 设置为OwnerDrawVariable,ListBox.ItemHeight值改大一点,字体也适当放大一号. ...

  10. Spark生态系统BDAS

    目前,Spark已经发展成为包含众多子项目的大数据计算平台. 伯克利将Spark的整个生态系统称为伯克利数据分析栈(BDAS). 其核心框架是Spark,同时BDAS涵盖支持结构化数据SQL查询与分析 ...