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. git/github初级运用自如(zz)

    ----//git/github环境配置 一 .  github上创建立一个项目 用户登录后系统,在github首页,点击页面右下角“New Repository” 填写项目信息: project n ...

  2. 怎样预防Ddos攻击

    一.为何要DDOS? 随着Internet互联网络带宽的增加和多种DDOS黑客工具的不断发布,DDOS拒绝服务攻击的实施越来越容易,DDOS攻击事件正在成上升趋势.出于商业竞争.打击报复和网络敲诈等多 ...

  3. hdu 2602 Bone Collector(01背包)

    题意:给出包裹的大小v,然后给出n块骨头的价值value和体积volume,求出一路下来包裹可以携带骨头最大价值 思路:01背包 1.二维数组(不常用 #include<iostream> ...

  4. selenium python (七)层级定位(二次定位)

    #!/usr/bin/python# -*- coding: utf-8 -*-__author__ = 'zuoanvip' #在实际测试过程中,一个页面可能有多个属性基本相同的元素,如果要定位到其 ...

  5. 【调试】DLL EXE 调试技巧

    0.随便说点 最近因为一些原因一直都没有更新博客,从今天开始要逐渐恢复了,也是对自己的鞭策. 1.本文目标 本文要说在有DLL 和 EXE源码的情况下调试DLL 和 EXE, 工具是VC++2010, ...

  6. C++中cin、cin.get()、cin.getline()、getline()、gets()等函数的用法----细节决定成败 (sort用法)

    C++中cin.cin.get().cin.getline().getline().gets()等函数的用法 学C++的时候,这几个输入函数弄的有点迷糊:这里做个小结,为了自己复习,也希望对后来者能有 ...

  7. PHPCURL直接访问JSONRPC服务

    <?php $ch = curl_init(); $url = 'http://localhost/jsonrpc?tm='.time().mt_rand (100,999); //参数是为了防 ...

  8. 怎么监视跟踪一个进程(Process)中的MS Unit Test DLL的详细性能(performance)【asp.net C#】

    Sample This tutorial will show how to instrument a unit test DLL for performance profiling. Visual S ...

  9. js运动 淡入淡出

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. [转]比较 Rational Unified Process (RUP) 和 Microsoft Solutions Framework (MSF)

      文档选项 将此页作为电子邮件发送 级别: 初级 Sandra Sergi Santos, 软件工程专家, IBM 2007 年 6 月 15 日 本文来自于 Rational Edge:Micro ...