<!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. 【手撸一个ORM】第十步、数据操作工具类 MyDb
			
    说明 其实就是数据库操作的一些封装,很久不用SqlCommand操作数据库了,看了点园子里的文章就直接上手写了,功能上没问题,但写法上是否完美高效无法保证,建议有需要的朋友自己重写,当然如果能把最佳实 ...
    
			
    2. 
						
  2. java 多线程 Callable中的futrue模式
			
    java实现Callable接口中用到了future模式,所以实现了这个接口就看到了有返回值,那它的基本原理是什么鬼,往下看. 何为future模式? future模式有点类似于商品订单.在网上购物时 ...
    
			
    3. 
						
  3. ASP.NET MVC CheckBoxFor为什么会生成hidden input控件
			
    自己开发的公众号,可以领取淘宝内部优惠券 @Html.CheckBoxFor(m => m.Bool) 使用CheckBoxFor方法得到的html代码会是下面这个样子 <input ch ...
    
			
    4. 
						
  4. Aspx 验证码_各种封装
			
    验证码 namespace CZBK.TestProject.Common { public class ValidateCode { public ValidateCode() { } /// &l ...
    
			
    5. 
						
  5. 生产消费者模式与python+redis实例运用（基础篇）
			
    根据这个图,我们举个简单的例子:假如你去某个餐厅吃饭,点了很多菜,厨师要一个一个菜的做,一个厨师不可能同时做出所有你点的菜,于是你有两个选择:第一个,厨师把所有菜都上齐了,你才开始吃:还有一个选择,做 ...
    
			
    6. 
						
  6. C# 发Domino邮件 报错误 Password or other security violation for database 的解决方案
			
    错误提示: Password or other security violation for database ******* 问题产生的描述: 之前C#发邮件是好的 加上了附件部分代码之后,出现了这 ...
    
			
    7. 
						
  7. Eucalyptus（v4.0）系统需求
			
    1.计算需求 Physical Machines: All Eucalyptus components must be installed on physical machines, not virt ...
    
			
    8. 
						
  8. 服网LNMP集群 w/ MySQL PaaS-1.0
			
    平台: arm 类型: ARM 模板 软件包: haproxy linux mysql nginx application server arm basic software fuwang infra ...
    
			
    9. 
						
  9. 第2章 核心C#
			
    1. 变量 1.1 变量需要遵循的规则: 变量必须初始化 初始化器不能为空 初始化器必须放在表达式中 不能把初始化器设置为一个对象,除非在初始化器中创建了一个新对象 1.2 变量的作用域 只要类在某个 ...
    
			
    10. 
						
  10. 05、Win7上openSSH的安装与配置
			
    05.Win7上openSSH的安装与配置 1.概述 linux上的ssh命令在网络通信场景下非常方便.现在windows也支持ssh方式和远程主机进行访问.如果只是使用ssh简单的访问功能,就需要很 ...
    
			
    11.