<!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. 各种电子面单Api接口免费对接-快宝开放平台

    1.什么是电子面单? 快递公司联合向商家提供的一种通过热敏纸打印输出纸质物流面单的物流服务,并且承载分单自动化算法等数据服务,是快递行业赋能的基础产品和服务. 2.电子面单长什么样? 各快递公司有自己 ...

  2. Oracle中SQL语句分类

    Oracle中SQL语句分类如下:1.DML语句 insert/delete/update/select/merge/explan plan/lock table2.DDL语句 create/atlt ...

  3. Django中过期@cache_page中缓存的views数据

    django的缓存系统中,cache_page 这个装饰器非常好用,只要添加一个装饰器就可以缓存views的响应内容,但是django没有提供过期这个views缓存数据的功能. @cache_page ...

  4. Dynamics CRM2016 WebApi查询之alternate key

    本篇继续来分享web api查询中的一条,利用alternate key进行查询. alternate key是个什么东西这里就不解释了如果有不知道的可以去看sdk.这里以房号信息实体为例,新建一个键 ...

  5. 粗浅看Struts2和Hibernate框架

    ----------------------------------------------------------------------------------------------[版权申明: ...

  6. Leetcode难度表及解题汇总

    Leetcode难度表及解题汇总 参考网上一份题目难度表,以及本人的解题. Id Question Difficulty Frequency Data Structures Algorithms Bl ...

  7. Android自定义异常类

    当一个项目中,异常可能出现地方非常多的时候就需要考虑封装处理异常信息.本篇博客就对自定义异常做一个封装,模拟实际开发中的异常处理. 新建一个基类异常HException: public class H ...

  8. ICL Auto Vectorization

    简介 此文简单介绍如何使用intel c++编译器实现向量化加速. 全文如下安排: base : 待优化的源代码. vectorization : 第一个向量化版本. aligned : 内存对其对向 ...

  9. Android TV开发总结（五）TV上屏幕适配总结

    前言:前面几篇总结一些TV上的小Sample,开源到GitHub:https://github.com/hejunlin2013/TVSample, 点击链接,可以持续关注.今天总结下TV上屏幕适配. ...

  10. defaultdict的威力

    >>> from collections import defaultdict >>> s='mmississippi' >>> d=defaul ...