<!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. mail邮箱
			
    1. 创建163邮箱(其他邮箱同理) 2.设置授权码 3.开启服务 4.vim /etc/mail.rc 5. 给你的qq邮箱设置163账号的白名 6. 发送md5结果到qq 7.无邮件正文 mail ...
    
			
    2. 
						
  2. (转)老男孩linux培训某节课前考试试题及答案分享
			
    目录:[考试目的] ................................2[考试范围]  ...............................2[答题策略] .......... ...
    
			
    3. 
						
  3. SpringBoot | 第十六章：web应用开发
			
    前言 前面讲了这么多直接,都没有涉及到前端web和后端交互的部分.因为作者所在公司是采用前后端分离方式进行web项目开发了.所以都是后端提供api接口,前端根据api文档或者服务自行调用的.后台也有读 ...
    
			
    4. 
						
  4. C#获得字符串首字符字母（大写）
			
    /// <summary> /// 获得字符串首字符字母(大写): /// </summary> /// <param name="cnChar"&g ...
    
			
    5. 
						
  5. JAVA爬虫---验证码识别技术（一）
			
    Python中有专门的图像处理技术比如说PIL,可以对验证码一类的图片进行二值化处理,然后对图片进行分割,进行像素点比较得到图片中的数字.这种方案对验证码的处理相对较少,运用相对普遍,很多验证码图片可 ...
    
			
    6. 
						
  6. 配置Linux环境
			
    安装mariadb +主从复制https://www.cnblogs.com/pyyu/p/9467289.html 参考博客 redis https://www.cnblogs.com/pyyu/p ...
    
			
    7. 
						
  7. weexpack 创建项目, 打包Android 和 ios
			
    1: 首先确保 node.js版本大于6.0, 不然使用 weexpack 时会报错(部分使用es6语言,node版本太低不支持es6) 下面所有都是命令行执行的命令 2: 全局安装 weexpack ...
    
			
    8. 
						
  8. wow.js+animate.css——有趣的页面滚动动画
			
    今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...
    
			
    9. 
						
  9. meterpreter > migrate 1548
			
    1548  1500  explorer.exe      x86   0           LIXIULI-VCS86VR\test      C:\WINDOWS\Explorer.EXE 19 ...
    
			
    10. 
						
  10. 巧用netsh命令实现端口转发(端口映射)不求人
			
    好处:即时生效,随意修改删除,不影响其他ip映射 记事本保存为bat格式批量添加后,并查看映射: netsh interface portproxy add v4tov4 listenport=701 ...
    
			
    11.