<!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. Uva12174
			
    #include <bits/stdc++.h> using namespace std; ; int t; int s,n; ]; ]; ]; void init(){ memset(a ...
    
			
    2. 
						
  2. 判断文件是否存在 local/hdfs
			
    在Linux文件系统中,我们可以使用下面的Shell脚本判断某个文件是否存在: # 这里的-f参数判断$file是否存在 if [ ! -f "$file" ]; then ech ...
    
			
    3. 
						
  3. 练习三十八：矩阵for循环应用
			
    习题如下: 求一个3*3矩阵对角线元素之和 利用for循环控制输出二维数组,再将a[i][j]累加后输出 a = [] sum1 = 0.0 for i in range(3): a.append([ ...
    
			
    4. 
						
  4. Docker最全教程之使用PHP搭建个人博客站点（二十二）
			
    目录 官方镜像  编写简单的Hello world! 1. 编写Hello world! 2. 编写Dockerfile 3. 构建并运行 4. 直接使用PHP Docker镜像运行PHP脚本 构建自 ...
    
			
    5. 
						
  5. nginx去掉url中的index.php
			
    使用情境:我想输入www.abc.com/a/1后,实际上是跳转到www.abc.com/index.php/a/1 配置Nginx.conf在你的虚拟主机下添加: location / {      ...
    
			
    6. 
						
  6. Lambda动态排序分页通用方法
			
    using System; using System.Collections.Generic; using System.Linq; using System.Linq.Expressions; us ...
    
			
    7. 
						
  7. node官方docker镜像运行bower 提示 permission denied 解决方法
			
    在使用node官方docker镜像部署node应用时,应用需要npm的scripts中运行bower install 来安装前端包,但是用docker 构建时失败,提示 permission dein ...
    
			
    8. 
						
  8. 【php】
			
    1 <?php $arr = [ 'a' => 'aaa', ]; $arr2 = $arr; $arr2['a'] = 'ccc'; print_r($arr); print_r($ar ...
    
			
    9. 
						
  9. mui的ajax例子1
			
    mui.ajax()方法,get请求 前端页面: <!DOCTYPE html><html><head> <meta charset="utf-8& ...
    
			
    10. 
						
  10. nmap --script http-enum,http-headers,http-methods,http-php-version  -p 80 目标域
			
    从http服务器上收集到更多地信息 nmap --script http-enum,http-headers,http-methods,http-php-version  -p 80 目标域
    
			
    11.