js创建元素（节点）示例

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery2</title>
<script type="text/javascript">
//创建节点
var addItems = function() {
document.getElementById("div1").innerHTML = "";
var value = parseInt(document.getElementById('itemsNumber').value);
for (var i = 0; i < value; i++) {
var input = document.createElement("input");
input.setAttribute("type", "text");
var br = document.createElement("br");
document.getElementById("div1").appendChild(input);
document.getElementById("div1").appendChild(br);

}
}
</script>
</head>
<body>
<input type="text" id="itemsNumber">
<input type="button" id="btn" value="click" onclick="addItems();" >
<div id="div1"></div>
</body>
</html>

赞 (0)

相关推荐

  • JavaScript中对DOM节点的访问、创建、修改、删除

    JavaScript中对DOM节点的访问、创建、修改、删除

    DOM DOM就是Document object Model的缩写.文档对象模型是把XML或HTML以树节点为表现形式的文档.用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素.DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript 看看下面的一个文本. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/

  • jQuery动态创建元素以及追加节点的实现方法

    我们知道js中有三种动态创建元素的方法,jQuery中也可以动态的创建元素 例如: var str = $("<a href='http://www.jb51.net'>我们</a>"); $("ul").append(str); //将动态创建的str元素追加到ul下面 追加节点 在js当中追加节点的方法是appendChild(节点元素)和insertBefor(节点元素,位置),在jQuery中是 append 追加在父元素的最后一个子

  • jquery创建一个新的节点对象(自定义结构/内容)的好方法

    jquery创建一个新的节点对象(自定义结构/内容)的好方法

    HTML 复制代码 代码如下: <!DOCTYPE html> <html> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <meta charset=utf-8 /> <title>JsBin-在线js/css调试工具&

  • 删除javascript所创建子节点的方法

    本文实例讲述了删除javascript所创建子节点的方法.分享给大家供大家参考.具体如下: js创建的节点,一时不知道如何删除...耗了一大堆时间 for(var i = 0; i < jsonList.length; i++ ){ var li_button = document.createElement("li"); li_button.className = "button"; var li_button_a = document.createElem

  • xml创建节点(根节点、子节点)

    复制代码 代码如下: protected void Button1_Click(object sender, EventArgs e)//创建xml { //声明 XmlDocument x = new XmlDocument(); //创建 XmlDeclaration xd = x.CreateXmlDeclaration("1.0", "GB2312", null); x.AppendChild(xd); //创建根节点 XmlElement element

  • jstree创建无限分级树的方法【基于ajax动态创建子节点】

    jstree创建无限分级树的方法【基于ajax动态创建子节点】

    本文实例讲述了jstree创建无限分级树的方法.分享给大家供大家参考,具体如下: 首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; s

  • jQuery与JavaScript节点创建方法的对比

    一. 创建节点: 节点是DOM结构的基础,根据DOM规范,节点是一个很宽泛的概念,包含元素.属性.文本.文档和注释.但在实际开发中,要动态创建内容,主要操作的节点包括元素.属性和文本. 1.需求:创建一个h1 标签,把它作为div元素的子节点添加到DOM节点树中. 2.基本思路是:先创建一个h1元素对象,然后添加到文档中. 3.以下是两种实现方式: // jQuery方式 var $h1 = $("<h1 title='创建节点' class='head'>jQuery与JavaSc

  • js和jquery对dom节点的操作(创建/追加)

    复制代码 代码如下: <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Button1').click(function () { // var ha = '<p>a</p>'; // $('div').app

  • jQuery简单创建节点的方法

    jQuery简单创建节点的方法

    本文实例讲述了jQuery简单创建节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1

  • JQuery创建DOM节点的方法

    本文实例讲述了JQuery创建DOM节点的方法.分享给大家供大家参考.具体分析如下: 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值.但真正的DOM操作并非这么简单.在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互的目的. HTML DOM结构如下: <p class="nm_p" title="欢迎访问我们" >欢迎访问

  • 初学js 新节点的创建 删除 的步骤

    特羡慕写出这些特效的高级程序员.我想学习,可总是不知道怎么去思考,不知道怎么去逻辑.有时候也很着急,这些都不怕,幸好还有人教我,指点我,这是我比较幸运的.但是我过不了自己这关了,自己最大的缺点就是 逃避,不会做的就放弃了,不会了就不会了,也不敢问了.改,这个大缺点一定得改.以下,是洋哥指点我的学习技巧,思路清晰,效率也有很大的提高..废话就不扯了,言归正传: 题目:btton 按钮 一个添加 一个删除 ,点击添加按钮就会添加一个节点,点击删除按钮就会删除最后一个节点,添加的新元素点击一下就会被删

  • 浅述节点的创建及常见功能的实现

    新创建一个元素节点,并把该节点添加为文档中指定节点的子节点 1,新创建一个元素节点,返回值为指向元素节点的引用 var liNode =document.creatElement("li"); var cityNode=document.getElementById("city"); 新添加newChild子节点,该子节点将作为elementNode cityNode.appendChild(liNode); 2,创建一个文本节点 creatTextNode var

  • 创建二叉树 二叉树如何删除节点操作教程

    复制代码 代码如下: // 二叉树.cpp : 定义控制台应用程序的入口点. // /* *二叉树作业 *2012.12.1 13:55 *Made By Karld Vorn Doenitz */ #include "stdafx.h" #include<iostream> #include<string> using namespace std; class TreeNode{//建立节点类 public: char num; TreeNode *leftc

随机推荐