今天在学习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. android adb常用命令

    android adb命令: adb root --获取root.adb remount --获取文件操作权限(push)adb shell pm list package 获取包名列表com.mqt ...

  2. Python’s SQLAlchemy vs Other ORMs[转发 2]Storm

    Storm Storm is a Python ORM that maps objects between one or more databases and Python. It allows de ...

  3. Jquery动态操作checkbox

    问题的由来:html页面中使用checkbox给新建用户授权,然后提交到后台服务器,完成给用户授权.用户授权完成之后,如果用户的权限发生改变管理员需要修改多个用户的权限或查看某用户的权限,点击不同的用 ...

  4. 关于正则表达式中参数/g /m的详细分析和例子详解

    总结1:参数/g的用法 表达式加上参数g之后,表明可以进行全局匹配,注意这里"可以"的含义.我们详细叙述: 1)对于表达式对象的exec方法,不加入g,则只返回第一个匹配,无论执行 ...

  5. guava学习--Preconditions

    转载:https://my.oschina.net/realfighter/blog/349819 Preconditions是guava提供的用于进行代码校验的工具类,其中提供了许多重要的静态校验方 ...

  6. C# in depth学习(1)

    第一章,C#开发的进化史 1.简单数据类型 2.排序 Sorting an ArrayList using IComparer (C# 1) Sorting a List<Product> ...

  7. LTE Air interface Channels-----http://www.rfwireless-world.com/Tutorials/LTE-logical-transport-physical-channels.html

    LTE technology works based on three channel types viz. logical channel,transport channel and physica ...

  8. javascript温故知新

    1 javascript作用域 初学javascript的时候,变量的作用域就感觉有些麻烦,他不像C#或java那样清晰明了,貌似处处都在作用域内,但有时会处处都是空. javascript中,变量的 ...

  9. html中frameset简介

    1, 只 要 <FRAMESET> <FRAME> 两个标签,框架便是网页画面分成几个框窗,同时取得多个 URL. 2, 该框架只记录如何划分,不会显示任何资料.所以不必放入 ...

  10. nRF24L01芯片控制——迈向无线的第一步

    nRF24L01芯片是一款专供单片机的射频收发芯片.工作于2.4GHz~2.5GHz ISM频段.融合了shockburst技术. 我先列出该芯片的硬件参数资料: 至于每个引脚的具体用途,可以参见技术 ...