1. 建立字符串和insertAdjacentHTML（'beforeEnd', ）

2. 通过createElement 创建标签  setAttribute 赋予标签类型 appendChild 插入标签

  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="add1Element()" value="添加">
  9.     <input type="button" onclick="add2Element()" value="添加">
  10.     <div id="i1">
  11.         <input type="text">
  12.     </div>
  13.     <script>
  14.         function add1Element() {
  15.             tag ='<p><input type="text"></p>';
  16.             document.getElementById('i1').insertAdjacentHTML('beforeEnd', tag)
  17.  
  18.         }
  19.         function add2Element() {
  20.             var tag =document.createElement('input');//createElement 创造标签
  21.             tag.setAttribute('type','text'); //setAttribute 插入属性
  22.             tag.style.fontsize = '16px';
  23.             p = document.createElement('p');
  24.             p.appendChild(tag); //appendChild 放入后面
  25.             document.getElementById('i1').appendChild(p)
  26.  
  27.         }
  28.     </script>
  29.  
  30. </body>
  31. </html>

创建标签的两种方法insertAdjacentHTML 和 createElement 创建标签 setAttribute 赋予标签类型 appendChild 插入标签的更多相关文章

  1. js如何动态创建表格（两种方法）

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  2. Vue 创建组件的两种方法

    地址:https://blog.csdn.net/cofecode/article/details/74634301 创建组件的两种方法 1.全局注册 2.局部注册 var child=Vue.ext ...

  3. Solr创建Core的两种方法

    创建Core的两种方法: 第一种方法: 1.打开dos命令窗口,切换目录到${solr.home}\bin,然后输入:solr create -c corename之后回车: 2.打开solr安装文件 ...

  4. JS动态创建元素（两种方法）

    前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...

  5. 进程和创建线程的两种方法(threading.Thread)

    进程 如QQ 要以一个整体的形式暴露给操作系统管理,里面包含对各种资源的调用,内存的管理, 网络接口的调用等,进程就是各种资源管理的集合 线程:是操作系统最小的调度单位,是一串指令的结合 进程 要操作 ...

  6. Java 创建线程的两种方法

    Java提供了线程类Thread来创建多线程的程序.其实,创建线程与创建普通的类的对象的操作是一样的,而线程就是Thread类或其子类的实例对象.每个Thread对象描述了一个单独的线程.要产生一个线 ...

  7. Java去除掉HTML里面所有标签的两种方法——开源jar包和自己写正则表达式

    Java去除掉HTML里面所有标签,主要就两种,要么用开源的jar处理,要么就自己写正则表达式.自己写的话,可能处理不全一些自定义的标签.企业应用基本都是能找开源就找开源,实在不行才自己写…… 1,开 ...

  8. AO创建IFeature的两种方法

    原文地址:http://www.cnblogs.com/MyLucifer/archive/2010/12/01/1893212.html 在ArcGIS Resouce Center中,ESRI介绍 ...

  9. (转)Android创建桌面快捷方式两种方法

    [IT168技术]Android在桌面上生成快捷方式有两种情况,一种是直接在桌面直接生成;一种是长按桌面,在弹出的快捷菜单中生成. 谈谈在桌面上直接生成.个人觉得这个比较爽快,既然都是快捷方式了干嘛还 ...

随机推荐

  1. UVA-1604 Cubic Eight-Puzzle （双向BFS+状态压缩+限制搜索层数）

    题目大意:立体的八数码问题,一次操作是滚动一次方块,问从初始状态到目标状态的最少滚动次数. 题目分析:这道题已知初始状态和目标状态,且又状态数目庞大,适宜用双向BFS.每个小方块有6种状态,整个大方格 ...

  2. 第一个mpvue小程序开发总结

    前言 说起小程序,其实在去年我都还只试着照着官方文档写过demo的,不过现在这家公司小程序做得比较多,我来之后也参与了几个小程序的开发了,最开始那几个是用的wepy,最近一个开始转用mpvue开发,最 ...

  3. JSP session过期时间（小记）

    以下情况,Session结束生命周期,Servlet容器将Session所占资源释放:1.客户端关闭浏览器2.Session过期3.服务器端调用了HttpSession的invalidate()方法. ...

  4. VC++ 6.0 C8051F340 MFC programming note

    /************************************************************************************** * VC++ 6.0 C ...

  5. java面试题6

    1.写一个冒泡排序的算法 升序排列: int[] nums = {5,6,9,10,20,30,28,27,15}; for(int i = 0;i<nums.length;i++){ for( ...

  6. web本地存储（localStorage、sessionStorage）

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  7. 【Xamarin】Visual Studio 2013 Xamarin for Android开发环境搭建与配置&Genymotion

    Xamarin Xamarin是基于Mono的平台. Xamarin旨在让开发者可以用C#编写iOS, Android, Mac应用程序,也就是跨平台移动开发. 下载资源 1,进入Xamarin官方网 ...

  8. c# 子线程如何通知主线程，个人总结

    我要实现的功能如下:程序中有2个线程,主线程和子线程,主线程中有一个变量:X主线程运行中激活子线程,子线程会做出计算改变 X 的值,主线程继续做其它的事,直到 X 的值发生改变时,才会响应,并在tex ...

  9. 安装 nodejs，npm,pm2

    一:需要安装组件: nodejs,npm,pm2 安装epel 源: rpm -ivh http://download.fedoraproject.org/pub/epel/6/x86_64/epel ...

  10. 智能家居入门DIY——【四、组合】

    前面几篇介绍了一些传感器和代码,这篇介绍一下把它们组合起来.之所以单独列出这部分,原因在于组合更多功能的时候发现使用软串口库驱动ESP8266时由于内存过小导致发送失败甚至整个系统无法工作的情况.所以 ...