<!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. spring boot之 Bean的初始化和销毁(4)
			
    原文:https://blog.csdn.net/z3133464733/article/details/79189699 -------------------------------------- ...
    
			
    2. 
						
  2. 转 怎样用grep命令去掉空格行和以#开头的行
			
    怎样用grep命令去掉空格行和以#开头的行 https://jingyan.baidu.com/article/359911f544c36b57fe030637.html
    
			
    3. 
						
  3. 小小粉丝度度熊  二分答案　＋    two pointer
			
    http://acm.hdu.edu.cn/showproblem.php?pid=6119 发现自己的two pointer能力超弱. 这题是合并时间后,二分答案. 可以知道对于每个时间区间,合法的 ...
    
			
    4. 
						
  4. 在spark2中的shell使用python3
			
    在spark2中的shell使用python3 spark2.0.0中的python默认使用python2,可以通过以下两种方式之一使用python3: PYSPARK_PYTHON=python3  ...
    
			
    5. 
						
  5. Web框架的应用
			
    从今天开始,我们将要学习有关Web框架的一些内容,在学习之前先来学习一下http协议,即基于http是如何通信的. http 概要:http是基于tcp/ip通信协议来传输数据的. 优点: 1.简单快 ...
    
			
    6. 
						
  6. mui的ajax例子2
			
    mui.post()方法 前端页面: <!DOCTYPE html><html><head> <meta charset="utf-8"& ...
    
			
    7. 
						
  7. [荐]推荐一个shell学习的网站
			
    最近再用shell脚本,发现一个脚本学习的网站,非常好用,特此推荐一下. shell学习网站链接:http://c.biancheng.net/cpp/shell/
    
			
    8. 
						
  8. 观察者模式（Observe Pattern）
			
    观察者模式: 当对象存在一对多关系时,使用观察者模式(Observe Pattern).例如:当一个对象被修改时,会通知它的依赖对象. 介绍: 1.意图:定义对象的一种一对多的依赖关系,当一个对象的状 ...
    
			
    9. 
						
  9. 几幅手稿讲解CNN
			
    学习深度神经网络方面的算法已经有一段时间了,对目前比较经典的模型也有了一些了解.这种曾经一度低迷的方法现在已经吸引了很多领域的目光,在几年前仅仅存在于研究者想象中的应用,近几年也相继被深度学习方法实现 ...
    
			
    10. 
						
  10. fancyBox高级进阶用法
			
    最近给客户做的一个项目中,客户要求弹窗的边界与页面某个区块边界平齐,但平齐之后,弹出的窗口就不是居中的情况了,研究之后,认为需要改写fancyBox的fancybox-wrap类中的top属性才能达到 ...
    
			
    11.