<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <input type="button" onclick="AddEle1()" value="+">

 <input type="button" onclick="AddEle2()" value="++">

 <div id="i1"></div>

 <script>

     function AddEle1() {
　　　　　　 //字符串的方式

         // 创建标签

         // 将标签添加到i1里面

         var tag = "<p><input type='text'></p>";
　　　　　　//注意第一个参数只能是“beforeBegin”,"afterBegein","beforeEnd","afterEnd"分别代表插入的位置
 document.getElementById('i1').insertAdjacentHTML("beforebegin",tag);   }   function AddEle2() {
　　　　　　　　//面向对象的方式

           // 创建标签

         // 将标签添加到i1里面

         var tag = document.createElement('input');//创建input标签

         tag.setAttribute('type','text');//设置标签类型

         tag.style.fontSize = '16px';    //设置标签属性

         tag.style.color = 'red';        //设置标签属性

         document.createElement('p');//创建一个p标签

         p.appendChild(tag);  //将创建的input标签添加到p标签中

         document.getElementById('i1').appendChild(p);//将p标签添加到id为1的div中

     }

 </script>

 </body>

 </html>

知识点：createElement(" ")创建标签

      appendChild()  添加子标签
效果如下图：
内容是自己输入的为了演示 第种方法设置了text的属性

												


											
JavaScript两种创建标签的的方法，实现点击按钮让text自增的更多相关文章
	

    
								
  1. django 两种创建模型实例的方法
		
    1. 添加一个classmethod from django.db import models class Book(models.Model): title = models.CharField(m ...
    
		
    2. 
						
  2. C#两种创建快捷方式的方法
		
    C#两种创建快捷方式的方法http://www.cnblogs.com/linmilove/archive/2009/06/10/1500989.html
    
		
    3. 
						
  3. javascript两种定时器的使用及其清除
		
    <!--示例代码如下:--><!DOCTYPE html> <html> <body> <p>A script on this page s ...
    
		
    4. 
						
  4. 两种读取.xml文件的方法
		
    这里介绍两种读取配置文件(.xml)的方法:XmlDocument及Linq to xml 首先简单创建一个配置文件: <?xml version="1.0" encodin ...
    
		
    5. 
						
  5. 【转载】 Java中String类型的两种创建方式
		
    本文转载自 https://www.cnblogs.com/fguozhu/articles/2661055.html Java中String是一个特殊的包装类数据有两种创建形式: String s  ...
    
		
    6. 
						
  6. 几种创建XMLHttpRequest对象的方法
		
    XMLHttpRequest对象,也就是Ajax交互的核心对象. 这里列举三种创建Ajax对象的方法. 第一种: <!DOCTYPE html> <html> <head ...
    
		
    7. 
						
  7. String变量的两种创建方式
		
    在java中,有两种创建String类型变量的方式: String str01="abc";//第一种方式 String str02=new String("abc&qu ...
    
		
    8. 
						
  8. GIT将本地项目上传到Github（两种简单、方便的方法）
		
    GIT将本地项目上传到Github(两种简单.方便的方法) 一.第一种方法: 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安 ...
    
		
    9. 
						
  9. 调用init方法 两种方式 一个是浏览器方法 一个是 xml中手工配置(load-on-startup)
		
    调用init方法 两种方式 一个是浏览器方法 一个是 xml中手工配置(load-on-startup)
    
		
    10. 
		

	


随机推荐
	

    
									
  1. poj 2348 Euclid's Game
			
    题目: 给两个整数a和b,两个人先后用较大的数减去较小数的整数倍,并且保证相减后为非负数.先把一个数变为0的人获胜. 分析: 很显然,当大数是小数的整数倍时为必胜态. 从这道题学会一个叫做自由度的东西 ...
    
			
    2. 
						
  2. java——集合、泛型、ArrayList、LinkedList、foreach循环、模拟ktv点歌系统
			
    集合:一系列特殊的类,这些类可以存储任意类型的对象,长度可变,集合类都在java.util包中. 但是集合记不住对象的类型,当把对象从集合中取出时这个对象的编译类型就变成了Object类型.这样在取元 ...
    
			
    3. 
						
  3. Binary Strings Gym - 101161G   矩阵快速幂 + 打表
			
    http://codeforces.com/gym/101161/attachments 这题通过打表,可以知道长度是i的时候的合法方案数. 然后得到f[1] = 2, f[2] = 3, f[3]  ...
    
			
    4. 
						
  4. Hive 环境的安装部署
			
    Hive在客户端上的安装部署 一.客户端准备: 到这我相信大家都已经打过三节点集群了,如果是的话则可以跳过一,直接进入二.如果不是则按流程来一遍! 1.克隆虚拟机,见我的博客:虚拟机克隆及网络配置 2 ...
    
			
    5. 
						
  5. 为什么有人会觉得IT门槛低，工资高？
			
    今天在高铁上,翻着逼乎,被一个话题勾住了,"为什么很多人会觉得IT门槛低?" 我一惊,还真是,身边朋友都觉得"IT赚的多","程序员工资高" ...
    
			
    6. 
						
  6. asp.net5开发中DNX SDK版本的影响
			
    某次asp.net5开发中遇到了一个很奇怪的问题,引用部分的nuget包没有显示任何错误,如下图: 但是编译时出现了几百个错误: 错误基本都是形如“CS0246 The type or namespa ...
    
			
    7. 
						
  7. MS Chart 条状图【转】
			
    private void Form1_Load(object sender, EventArgs e) {            string sql1 = "select  类别,coun ...
    
			
    8. 
						
  8. 一般处理程序ashx
			
    在用户列表中链接数据库 在这里Html只管做Post 请求,其他逻辑全部交给ashx 其中修改需要隐藏域 1.展现列表 public void ProcessRequest (HttpContext  ...
    
			
    9. 
						
  9. 分享一个WPF下日历控件（Calendar）的样式
			
    WPF日历控件的一个样式 WPF自带的日历控件样式可能会比较丑,要修改其样式看起来挺复杂的,实际上很简单,用Blend打开,修改三个模板,基本就能改变全部面貌,也很容易 先上图 样式如下: <S ...
    
			
    10. 
						
  10. jQuery读取和设定KindEditor值的方法
			
    转载自:https://www.jb51.net/article/43595.htm 侵删 jQuery读取和设定KindEditor值的方法 更新时间:2013年11月22日 09:03:56    ...
    
			
    11.