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 相关文章推荐
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
KnockoutJs快速入门教程
May 16 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
JS forEach跳出循环2种实现方法
Jun 24 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
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
详解PHP数组赋值方法
2015/11/07 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
原生JS实现留言板
2020/03/26 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
人机交互程序 python实现人机对话
2017/11/14 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
英文翻译的自我评价语句
2013/10/04 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
社区禁毒工作方案
2014/06/02 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
成本会计实训报告
2014/11/05 职场文书
惊天动地观后感
2015/06/10 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫