1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/javascript">
  5. /*
  6.  创建字节入插入节点、设置节点的属性。
  7.  
  8. 	document.createElement("标签名")		创建新元素节点
  9. 	elt.setAttribute("属性名", "属性值")	设置属性
  10. 	elt.appendChild(e)						添加元素到elt中最后的位置
  11.  
  12. */
  13.  
  14. 	var num  = 1;
  15. 	function add(){
  16. 		var inputNode = document.createElement("input"); //创建一个指定标签名字的节点。
  17.  
  18. 		//setAttribute:设置节点的属性
  19. 		inputNode.setAttribute("type","button");
  20. 		inputNode.setAttribute("value","按钮"+num);
  21. 		num++;
  22.  
  23. 		var bodyNode = document.getElementsByTagName("body")[0];
  24. 		bodyNode.appendChild(inputNode); //appendChild 添加子节点。
  25.  
  26. 	}
  27.  
  28. </script>
  29. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  30. <title>无标题文档</title>
  31. </head>
  32. <body>
  33. 	<input type="button" onclick="add()" value="添加"/>
  34. </body>
  35. </html>

效果如下所示：

javascript之DOM编程设置节点插入节点的更多相关文章

  1. JavaScript的DOM编程--03--读写属性节点

    读写属性节点: 1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值 2)通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue ...

  2. JavaScript的DOM编程--04--获取元素节点的子节点

    获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 ...

  3. JavaScript的DOM编程--02--获取元素节点

    如何来获取元素节点: 1) .document.getElementById: 根据 id 属性获取对应的单个节点 2) .document.getElementsByTagName: 根据标签名获取 ...

  4. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  5. JavaScript的DOM编程--11--插入节点

    插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,t ...

  6. JavaScript的DOM编程--10--删除节点

    1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. ...

  7. dom操作------创建节点/插入节点

    <section> <div id="box" style="position: relative;"> <p id=" ...

  8. javascript数据结构与算法--二叉树（插入节点、生成二叉树）

    javascript数据结构与算法-- 插入节点.生成二叉树 二叉树中,相对较小的值保存在左节点上,较大的值保存在右节点中 /* *二叉树中,相对较小的值保存在左节点上,较大的值保存在右节点中 * * ...

  9. 高性能Javascript(2) DOM编程

    第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

随机推荐

  1. 在Linux系统上获取命令帮助信息和划分man文档

    使用历史命令history 打完以后前面会有顺序号的比如1 cd2 ls3 pwd如果需要重新执行cd命令则可以执行 !3 命令 命令补全功能 比如你要执行history命令 可以打上histo+键 ...

  2. Python小代码_3_购物车

    product_list = [ ('MacBook', 9000), ('kindle', 500), ('tesla', 900000), ('book', 100), ('bike', 2000 ...

  3. jmeter录制APP时不能登录的问题

    问题描述: 录制APP时,其他一切挺顺利的,但在登录的时候提示"服务器发生未知错误,请稍后重试".一开始以为是接口问题,用python脚本调用了下,是可以登录的,排除接口问题.百度 ...

  4. ftp传二进制文件时一定要用二进制模式，否则内容会有变化，造成后处理莫名其妙的错误，还以为传输前后内容一致，其实已变化。

    ftp传二进制文件时一定要用二进制模式,否则内容会有变化,造成后处理莫名其妙的错误,还以为传输前后内容一致,其实已变化.

  5. Zookeeper Api

    如何使用 Zookeeper 作为一个分布式的服务框架,主要用来解决分布式集群中应用系统的一致性问题,它能提供基于类似于文件系统的目录节点树方式的数据存储,但是 Zookeeper 并不是用来专门存储 ...

  6. 永远不要在循环之外调用wait方法

    1. 前言 随着摩尔定律的失效,Amdahl定律成为了多核计算机性能发展的指导.对于现在的java程序员们来说,并发编程越来越重要和习以为常.很惭愧和恐慌的是我对java的并发编程一直是只知道概念,入 ...

  7. tomcat内存溢出解决，java.lang.OutOfMemoryError: PermGen space

    今天遇到了一个java.lang.OutOfMemoryError: PermGen space异常问题,一直解决不了,根据网上修改了tomcat的配置文件,但是还是解决不了,最后是通过如下方式解决的 ...

  8. Swift 3中新的访问控制关键字fileprivate和open

    在Swift 3中除去原有的3个访问控制关键字private,public,internal,又添加了2个关键字fileprivate和open 它们可以看成是对private和public的进一步细 ...

  9. Android图表库MPAndroidChart(十四)——在ListView种使用相同的图表

    Android图表库MPAndroidChart(十四)--在ListView种使用相同的图表 各位好久不见,最近挺忙的,所有博客更新的比较少,这里今天说个比较简单的图表,那就是在ListView中使 ...

  10. Android 如何监听输入法关闭事件

    假设有如下界面(输入法的上面的输入区域是用Dialog实现的) 要求当输入法关闭的时候,Dialog也一起关闭,这样用户就不需要返回两次了. 网上找了很多资料都没有很好的解决这个问题,输入法是第三方程 ...