<!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. nagios部署配置流程
			
    nagios部署配置流程 nagios服务端:1.部署nagios服务端(参考nagios官方部署文档).nagios-plugin.php.apache2 2.需要在服务端添/etc/hosts中添 ...
    
			
    2. 
						
  2. [Leetcode]005. Longest Palindromic Substring
			
    public String longestPalindrome(String s) { int start = 0, end = 0; for (int i = 0; i < s.length( ...
    
			
    3. 
						
  3. 018.Java类加载器
			
    https://www.ibm.com/developerworks/cn/java/j-lo-classloader/ 类加载器(class loader) 用来加载 Java 类到 Java 虚拟 ...
    
			
    4. 
						
  4. Erlang 001--开篇
			
    有段时间没有更新博客了,最近稍微接触了下一门相对小众的语言Erlang,个人感觉学习一段时间有必要总结总结,本文作为该系列的开篇,仅仅列举一些与Java的一些不同点和个人对Erlang的一些主观印象, ...
    
			
    5. 
						
  5. 《Head First 设计模式》之装饰者模式——饮料加工
			
    装饰者模式(Decorator) ——动态地将责任附加到对象上.若要扩展功能,装饰者提供了比继承更有弹性的替代方案. 特点:建立拥有共同超类的装饰者与被装饰者来实现功能的动态扩展 原则:对扩展开放,对 ...
    
			
    6. 
						
  6. js或者jq判断一段文字中是否有自己想要的那几个字，如果有就把那几个字变成红色
			
    如何判断一段文字中是否有自己想要的那几个字,如果有就把那几个字变成红色(在html中)比如有body中有这么一串文字“驾驶的后视镜的华盛顿”,想要判断里面是否有“驾驶”这两个字,如果有就把这两个字变成 ...
    
			
    7. 
						
  7. JavaScript获取URL参数公共方法
			
    写一个JavaScript获取URL参数的通用方法,可以把它放到常用方法的JS文件中调用,直接上代码例子,新手可以学习一下! <!DOCTYPE html> <html lang=& ...
    
			
    8. 
						
  8. unity中的动画制作方法
			
    Unity中的动画制作方法 1.DOTween DoTween在5.0版本中已经用到了,到官网下载好插件之后,然后通过在项目中导入头using DG.Tweening;即可. 一些常用的API函数 D ...
    
			
    9. 
						
  9. Windows服务器高并发处理IOCP（完成端口）详细说明
			
    一． 完成端口的优点 1. 我想只要是写过或者想要写C/S模式网络服务器端的朋友,都应该或多或少的听过完成端口的大名吧,完成端口会充分利用Windows内核来进行I/O的调度,是用于C/S通信模式中性 ...
    
			
    10. 
						
  10. Centos6.5安装部署nodejs
			
    使用编译好的包安装 一.在官网下载包 https://nodejs.org/en/download/ 二.把包传送到服务器,进入到包目录并解压 tar axvf node-v6.9.5-linux-x ...
    
			
    11.