<!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++笔记--1

    一.namespace 命名空间 //定义一个命名空间 namespace spaceA { ; } int main(void) { //调用方式一 using namespace spaceA; ...

  2. 分别用face++和百度获取人脸属性(python单机版)

    称之为单机版,主要是相对于调用摄像头实时识别而言.本篇主要py2下利用face++和百度接口获取本地图片中的人脸属性,并按照一定格式保存数据. face++版 face++是刚注册的,只能用一个试用的 ...

  3. freemarker的使用

    一:freemarker是什么? freemarker是一个模板引擎,基于定义的模板和数据生成对应的文本(HTML,xml,java等),是一个生成文本的工具. 二:freemarker的使用方法 ( ...

  4. Bootstrap3 表单-水平排列的表单

    通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局.这样做将改变 .form-group 的行为,使其表现 ...

  5. ZooKeeper之（一）ZooKeeper是什么

    1.1 产生背景 当今是个分布式.集群.云计算等名词满天飞的时代.造成这种局面的一个重要因素就是,单一机器的处理能力已经不能满足我们的需求,不得不采用由多台机器组成的服务集群.服务集群对外提供服务的过 ...

  6. 20160217.CCPP体系详解(0027天)

    程序片段(01):TestCmd.c 内容概要:管道_字符串 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include < ...

  7. Dynamics CRM 打开数据加密报错及修改用户邮件保存报错的解决方法

    在项目里会碰到在修改用户的电子邮件时报错的问题 然后跑到数据管理里打开数据加密又是报错 解决上述问题只需要做下数据库的更改即可,把标志位置1即可,记得要重启下IIS才能生效 SELECT [Colum ...

  8. Android Studio 中设置代码块自动补齐

    AS中很多提示键,并不如Eclipse中做的好,需要我们自己去自定义.这里以switch...case为例,讲解一下如何设置代码自动补全. 1.进入settings -->  Editor -- ...

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

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

  10. Unity 资源管理插件

    之所以写这个插件呢,就是为了方便整理项目中的资源文件,我记得之前好像也用了这么一个插件,但是也没去找,还是自己动手写一个吧,需要什么功能就看自己的需求. 在项目的过程中呢,已经写了一个插件来管理材质, ...