document.createElement()用法


Posted in Javascript onMarch 13, 2013

 document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

      下面,举例说明document.createElement()的用法。<div id="board"></div>
例1:

        <script type="text/javascript">
            var board = document.getElementById("board");
            var e =document.createElement("input");
           e.type = "button";
            e.value = "这是测试加载的小例子";
            var object = board.appendChild(e);
        </script>

效果:在标签board中加载一个按钮,属性值为“这是测试加载的小例子”。

例2:

        <script type="text/javascript">
            var board = document.getElementById("board");
            var e2 = document.createElement("select");
            e2.options[0] = new Option("加载项1", "");
            e2.options[1] = new Option("加载项2", "");
            e2.size = "2";
            var object = board.appendChild(e2);
        </script>

效果:在标签board中加载一个下拉列表框,属性值为“加载项1”和“加载项2”。

例3:

        <script type="text/javascript">
            var board = document.getElementById("board");           
            var e3 = document.createElement("input");
           e4.setAttribute("type", "text");
            e4.setAttribute("name", "q");
            e4.setAttribute("value", "使用setAttribute");
            e4.setAttribute("onclick", "javascript:alert('This is a test!');");           
            var object = board.appendChild(e3);
        </script>

效果:在标签board中加载一个文本框,属性值为“使用setAttribute”。 当点击这个文本框时,会弹出对话框“This is a test!”。

根据上面例子,可以看出,可以通过加载对象的属性来设置,参数是相同的。使用e.type="text" 和 e.setAttribute("type","text")效果是一致的。

下面,我们用实例来讲述一下appendChild() 方法和insertBefore() 方法的不同。

比如我们要在下面这个div中插入一个子节点P时:<div id="test"><p id="x1">Node</p><p>Node</p></div>

我们可以这样写:

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  //测试从这里开始
  //appendChild方法:
  oTest.appendChild(newNode);
  //insertBefore方法:
  oTest.insertBefore(newNode,null);
</script>

      通过以上的代码,可以测试到一个新的节点被创建到了节点div下,且该节点是div最后一个节点。很明显,通过这个例子,可以知道appendChildhild和insertBefore都可以进行插入节点的操作。

在上面的例子中有这样一句代码:oTest.insertBefore(newNode,null) ,这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二却是它特有的。它不仅可以为null,还可以为:

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var refChild = document.getElementById("x1");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  oTest.insertBefore(newNode,refChild);
</script>

效果:这个例子将在x1节点前面插入一个新的节点

又或:

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var refChild = document.getElementById("x1");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  oTest.insertBefore(newNode,refChild.nextSibling);
</script>

效果:这个例子将在x1节点的下一个节点前面插入一个新的节点

还可为:

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  oTest.insertBefore(newNode,oTest.childNodes[0]); 
</script>

这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点

由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来,发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。

从这几个例子中得出:

appendChild() 方法在节点的子节点列表末添加新的子节点。

insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

Javascript 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
javascript搜索框效果实现方法
May 14 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
js常用DOM方法详解
Feb 04 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
js获得鼠标的坐标值的方法
Mar 13 #Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 #Javascript
九种js弹出对话框的方法总结
Mar 12 #Javascript
瀑布流布局并自动加载实现代码
Mar 12 #Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 #Javascript
P3P Header解决Cookie跨域的问题
Mar 12 #Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 #Javascript
You might like
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
一个颜色轮换的简单例子
2006/10/09 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
python任务调度实例分析
2015/05/19 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
自主招生自荐信范文
2013/12/04 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
三八妇女节寄语
2015/02/27 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript