1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.  <input type="button" onclick="AddEle1()" value="+">
  9.  <input type="button" onclick="AddEle2()" value="++">
  10.  
  11.  <div id="i1"></div>
  12.  
  13.  <script>
  14.  
  15.      function AddEle1() {
    　　　　　　 //字符串的方式
  16.          // 创建标签
  17.          // 将标签添加到i1里面
  18.          var tag = "<p><input type='text'></p>";
  1. 　　　　　　//注意第一个参数只能是“beforeBegin”,"afterBegein","beforeEnd","afterEnd"分别代表插入的位置
  1.  document.getElementById('i1').insertAdjacentHTML("beforebegin",tag);   }   function AddEle2() {
    　　　　　　　　//面向对象的方式
  2.            // 创建标签
  3.          // 将标签添加到i1里面
  4.          var tag = document.createElement('input');//创建input标签
  5.          tag.setAttribute('type','text');//设置标签类型
  6.          tag.style.fontSize = '16px';    //设置标签属性
  7.          tag.style.color = 'red';        //设置标签属性
  8.  
  9.          document.createElement('p');//创建一个p标签
  10.          p.appendChild(tag);  //将创建的input标签添加到p标签中
  11.          document.getElementById('i1').appendChild(p);//将p标签添加到id为1的div中
  12.  
  13.      }
  14.  
  15.  </script>
  16.  
  17.  </body>
  18.  </html>

知识点：createElement(" ")创建标签

  1.       appendChild()  添加子标签
    效果如下图：
    内容是自己输入的为了演示 第种方法设置了text的属性

  1.  

JavaScript两种创建标签的的方法，实现点击按钮让text自增的更多相关文章

  1. django 两种创建模型实例的方法

    1. 添加一个classmethod from django.db import models class Book(models.Model): title = models.CharField(m ...

  2. C#两种创建快捷方式的方法

    C#两种创建快捷方式的方法http://www.cnblogs.com/linmilove/archive/2009/06/10/1500989.html

  3. javascript两种定时器的使用及其清除

    <!--示例代码如下:--><!DOCTYPE html> <html> <body> <p>A script on this page s ...

  4. 两种读取.xml文件的方法

    这里介绍两种读取配置文件(.xml)的方法:XmlDocument及Linq to xml 首先简单创建一个配置文件: <?xml version="1.0" encodin ...

  5. 【转载】 Java中String类型的两种创建方式

    本文转载自 https://www.cnblogs.com/fguozhu/articles/2661055.html Java中String是一个特殊的包装类数据有两种创建形式: String s ...

  6. 几种创建XMLHttpRequest对象的方法

    XMLHttpRequest对象,也就是Ajax交互的核心对象. 这里列举三种创建Ajax对象的方法. 第一种: <!DOCTYPE html> <html> <head ...

  7. String变量的两种创建方式

    在java中,有两种创建String类型变量的方式: String str01="abc";//第一种方式 String str02=new String("abc&qu ...

  8. GIT将本地项目上传到Github（两种简单、方便的方法）

    GIT将本地项目上传到Github(两种简单.方便的方法) 一.第一种方法: 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安 ...

  9. 调用init方法 两种方式 一个是浏览器方法 一个是 xml中手工配置(load-on-startup)

    调用init方法 两种方式 一个是浏览器方法 一个是 xml中手工配置(load-on-startup)

随机推荐

  1. python3.6下安装wingIDE破解方法

    1.wingIDE的下载: 在电脑配置好的python环境情况下,去官网下载wingIDE6,按照一般方式安装好.安装好它会自动提示你是否激活,你点击激活.然后到下一步. 2.脚本的制作: impor ...

  2. C++之struct

    C++的struct对C做和很多补充,里面可以放函数(构造函数和虚函数),也可以同struct和class的继承,在C++中也完全可以替代class.他们之间的主要区别: 1 calss默认是私有继承 ...

  3. Spark最简安装

    该环境适合于学习使用的快速Spark环境,采用Apache预编译好的包进行安装.而在实际开发中需要使用针对于个人Hadoop版本进行编译安装,这将在后面进行介绍. Spark预编译安装包下载——Apa ...

  4. Maven插件和细节

    1.父工程统一版本号 <!-- 集中定义依赖版本号 --> <properties> <junit.version>4.12</junit.version&g ...

  5. SQLServer数据库语句大全汇总

    目录清单CONTEXT LIST1.数据库DataBase 1.1数据库建立/删除create/drop database 1.2数据库备份与恢复backup/restore database2.数据 ...

  6. PowerShell 操作 OFFICE

    UiPath操作Office软件的方式,这里说一下用PowerShell调用Office的COM组件的方式 老生常谈~每个程序员都要至少掌握一门脚本编程语言... EXCEL: $excel = Ne ...

  7. 使用jQuery实现文本框input定位到文字最后（兼容所有浏览器）

    $.fn.setCursorPosition = function(position){ if(this.lengh == 0) return this; return $(this).setSele ...

  8. strlen()与mb_strlen()的作用分别是什么

    strlen和mb_strlen都是用于截取字符串的,其中strlen只针对单字节编码字符 如果是多字节编码字符 如gbk和utf8 使用strlen会出现乱码 此时可以使用mb_strlen(),专 ...

  9. weexpack 创建项目, 打包Android 和 ios

    1: 首先确保 node.js版本大于6.0, 不然使用 weexpack 时会报错(部分使用es6语言,node版本太低不支持es6) 下面所有都是命令行执行的命令 2: 全局安装 weexpack ...

  10. vue中background-image图片路径问题

    按照以往在css文件中写background:url('图片路径'),完成后加载竟然显示出错,起初以为路径不对,检查了几遍,仍然没有问题.最后百度找答案,发现不少同行都遇到过这种问题,遂记录下自己所采 ...