<!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. 3.5 find() 判断是否存在某元素

    vector 判断是否存在某元素: if(find(A.begin(), A.end(), A[i]) != A.end()){ // 若存在 A[i] // find() 返回一个指针 }

  2. Go 语言基础语法

    Go 标记 Go 程序可以由多个标记组成,可以是关键字,标识符,常量,字符串,符号.如以下 GO 语句由 6 个标记组成: fmt.Println("Hello, World!") ...

  3. python OptParse模块的用法详解

    OptParse模块的简单介绍 Python 有两个内建的模块用于处理命令行参数: 一个是 getopt只能简单处理 命令行参数: 另一个是 optparse,它功能强大,而且易于使用,可以方便地生成 ...

  4. Spring3+Hibernate4连接Oracle11g数据库参数配置

    应用场合:使用SSH框架开发一套应用系统,因为不同的SSH版本+系统架构会导致各种的错误,总结测试了下,成功测试得出本文配置 软件版本:Sping3+Hibernate4+Maven3 主要配置文件内 ...

  5. FORM开发两种方式实现动态LIST

    方法一:常规的,也是网上比较常见的 1.将目标ITEM的子类信息设置为List,不需要添加列表中元素,不需要初始值. 2.新建一个Procedure,代码如下: PROCEDURE basis_lis ...

  6. SpriteKit:检测当新场景显示以后

    Detecting When a New Scene Is Presented Sprite Kit在SKScene类中提供2个可以重载的方法用来检测当一个场景过渡出去或过渡进来的时候. 第一个方法是 ...

  7. [ExtJS5学习笔记]第十三节 Extjs5的Ext.each方法学习

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39009555 sencha官方API:http://docs.sencha.com/e ...

  8. IT女孩特不烦恼---九月实习总结

    对着岁月落笔,画出一场清风,那是最真的笑容 一溜烟的功夫,小编来实习Android已经四个月了,从刚开始的电商项目到现在的车段子项目,小编渐渐对这个曾经陌生的名字慢慢扭转变成熟悉的面孔,四个月的时间, ...

  9. 保证service存活

    Android开发的过程中,每次调用startService(Intent)的时候,都会调用该Service对象的onStartCommand(Intent,int,int)方法,然后在onStart ...

  10. (NO.00005)iOS实现炸弹人游戏(六):游戏数据的初始化(三)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 现在我们来看看实际初始化地图的randomCreateMap方法 ...