<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">

/*

 创建字节入插入节点、设置节点的属性。

	document.createElement("标签名")		创建新元素节点

	elt.setAttribute("属性名", "属性值")	设置属性

	elt.appendChild(e)						添加元素到elt中最后的位置

*/

	var num  = 1;

	function add(){

		var inputNode = document.createElement("input"); //创建一个指定标签名字的节点。

		//setAttribute:设置节点的属性

		inputNode.setAttribute("type","button");

		inputNode.setAttribute("value","按钮"+num);

		num++;

		var bodyNode = document.getElementsByTagName("body")[0];

		bodyNode.appendChild(inputNode); //appendChild 添加子节点。

	}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

	<input type="button" onclick="add()" value="添加"/>

</body>

</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. C# 获取当前屏幕DPI

    1.通过Graphics类获取 Graphics currentGraphics = Graphics.FromHwnd(new WindowInteropHelper(mainWindow).Han ...

  2. TP中的AJAX返回ajaxReturn()

    系统支持任何的AJAX类库,Action类提供了ajaxReturn方法用于AJAX调用后返回数据给客户端.并且支持JSON.XML和EVAL三种方式给客户端接受数据,通过配置DEFAULT_AJAX ...

  3. zookeeper工作机制

    Zookeeper Zookeeper概念简介: Zookeeper是为用户的分布式应用程序提供协调服务的 zookeeper是为别的分布式程序服务的 Zookeeper本身就是一个分布式程序(只要有 ...

  4. block的那些事（从懵懂到使用）

    从大学开始自学iOS,在iOS岗位已经两年了,遇到传值等操作,代理和block二选一的话,以前我会毫不犹豫选择代理.久而久之,入职到大公司之后,发现处处是block的天地,才慢慢的了解block并爱上 ...

  5. Dubbo框架应用之（三）--Zookeeper注册中心、管理控制台的安装及讲解

    我是在linux下使用dubbo-2.3.3以上版本的zookeeper注册中心客户端.Zookeeper是Apache Hadoop的子项目,强度相对较好,建议生产环境使用该注册中心.Dubbo未对 ...

  6. OBJ文件格式分析工具: objdump, nm,ar

    首先简要阐述关于gcc.glibc和 binutils模块之间的关系 一.关于gcc.glibc和binutils模块之间的关系 1.gcc(gnu collect compiler)是一组编译工具的 ...

  7. Swift中if与switch语句使用一例

    在Swift中相同的条件处理有if和switch两个语句,我们如何取舍呢? 一种情况下我们只在乎x是否在一个范围内,但并不关心x是否穷尽!换句话说不关心在满足范围条件的其他情况下,此时我们可以考虑用i ...

  8. 一道有趣的Twitter技术面试题

    来自:http://blog.jobbole.com/50705/ 看下面这个图片” “在这个图片里我们有不同高度的墙.这个图片由一个整数数组所代表,数组中每个数是墙的高度.上边的图可以表示为数组[2 ...

  9. ZAB协议

    zookeeper依赖zab协议来实现分布式数据一致性.基于该协议,zookeeper实现了一种主备模式的系统架构来保持ZooKeeper为高可用的一致性协调框架,自然的ZooKeeper也有着一致性 ...

  10. tomcat启动批处理——catalina.bat

    这个批处理才是tomcat服务器启动跟关闭的核心脚本.其中包括....(各种变量),此节将详细讲解这个批处理的逻辑. 先看看第一部分脚本: ****************************** ...