今天在学习DOM节点操作时,发现了创建DOM节点的createElement()方法的一个有意思的现象。

代码如下:

    var box=document.getElementById("box");//假设网页中已经有个ID为box的元素;

    var bbb=document.getElementById("bbb");//假设网页中已经有个ID为box的元素;

    var aaa=document.createElement("div");//创建一个div元素

box.appendChild(aaa);//在box元素的最后面插入一个新节点aaa;(此时,aaa在box中的最后面)

    box.insertBefore(aaa,bbb);//在box元素之前插入一个新节点aaa;(此时,aaa在bbb前面,并从box中最后面消失)

    box.appendChild(aaa);//在box元素的最后面插入一个新节点aaa;(此时,aaa在box中的最后面,并从box前面消失)

于是我猜想,createElement()方法创建的元素是动态的,而且是唯一的,

无论你对其创建的元素调用多少次,createElement()创建的元素存在的位置属于根据最后一次被调用的节点来判断。

在这暂时纪录下,留待以后深入理解。

HTML DOM对象之createElement()方法的更多相关文章

  1. jquery和dom对象相互转化的方法

    jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得 ...

  2. javascript获取DOM对象三种方法

    1. getElementByID() getElementByID()方法可返回对拥有指定ID的第一个对象的引用 2. getElementByTagName() getElementByTagNa ...

  3. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  4. 锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)

    1.jQuery对象就是通过jQuery包装DOM对象后产生的对象.   2.jQuery对象和DOM对象的相互转换.   良好的书写风格: var $input=$("input" ...

  5. jQuery对象和DOM对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

  6. jQuery对象与dom对象相互转换

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...

  7. JQuery对象与DOM对象的区别与转换

      1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...

  8. 什么是jquery $ jQuery对象和DOM对象 和一些选择器

    1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...

  9. jQuery对象与DOM对象之间的转换方法

    刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...

随机推荐

  1. 重写TextField Rect 改变显示位置

    很简单很常用的一些东西,希望给需要的人帮助. 效果图如下: 自定义textField init() { super.init(frame: CGRect(x: , y: , width: yourWi ...

  2. 如何在VISIO 2010/2013 中关闭Shape protection(图形保护)

    最近在画UML图,用到MS visio 2010, 在使用一些网络查找到的图形的时候发现无法编辑,在网上找了找,翻译了下. Visio 2013 的图形保护功能,可以锁定图形的某些特定属性,使其无法被 ...

  3. for(String s:v)

    s是遍历后赋值的变量,v是要遍历的list.可以通过以下语句进行测试: List<String> v=new ArrayList(); v.add("one"); v. ...

  4. nodejs解决找不到express命令的问题

    一般的书或者教程上的安装步骤是:(需要是-g,即全局安装) npm install -g express //全局安装 而我们应该多多关注下express的文档,github地址:https://gi ...

  5. bootstrap中如何让响应式图片(img-responsive)水平居中

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...

  6. hdu 5927 Auxiliary Set

    传送门 分析:感觉这道题有点意思.就写一篇mark一下吧. 现场比赛的时候去枚举了儿子用了线段树+dfs序,和预想的一样T了. 可以换一个想法,从儿子对父亲的贡献来思考. 在点中先假设一个节点的每一个 ...

  7. 我们应当怎样学习HTML和CSS

    目标读者:web前端小白.大神请绕路 学习一门新技术,应当找一本经典入门书,在两三天之内快速翻阅完毕,了解其概貌. 然后再制定一个学习路线图(这个路线图绝大多数情况下非书本目录的顺序),接着遵循学习路 ...

  8. 关于KINECT2 和ROS接口安装的问题

    具体安装过程见此博客 http://www.itdadao.com/articles/c15a450477p0.html 感谢博主. 注意,在我自己的电脑上,最后测试的两条代码执行不了,即:1)ros ...

  9. Windows Store App 全球化:引用类库资源

    前面几个小节介绍了如何引用自身项目的资源,而有时在应用程序开发过程中可能需要访问其他项目中的资源.例如,当几个人或十几个人一起设计一个解决方案时,每个人的工作都是不同的,编写的项目也是不同的,但是每个 ...

  10. 常用的web功能测试方法

    功能测试就是对产品各功能进行验证,根据功能测试用例,逐项测试,检查产品是否达到用户要求功能,即是否满足需求.常用的测试方法如下: 1.页面连接检查:每一个连接是否都有对应的页面,并且页面之间切换正确. ...