<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="i1">

        <input type="button" value="+" onclick="add_1();" style="background-color: red">

        <input type="button" value="+" onclick="add_2()" style="background-color: yellow">

    </div>

    <script>

        function add_1(){

            var tag = "<p><input type='text' style='background-color:red' /></p>" ;

            document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);

        }

        function add_2(){

            var tag = document.createElement('input');

            tag.setAttribute('type','text')

            tag.style.backgroundColor ='yellow';

            var p1 = document.createElement('p');

            p1.appendChild(tag)

            document.getElementById('i1').appendChild(p1)

        }

    </script>

</body>

</html>

Dom-创建标签的更多相关文章

  1. Dom之标签增删操作

    dom操作:THML新增子标签 a标签(appendChild) <!DOCTYPE html><html lang="en"><head> & ...

  2. JavaEE XML DOM创建

    DOM创建XML @author ixenos 1.思路: 先封装构建一颗DOM树,然后将DOM树转换成XML文件 2.三种写DOM树到XML文件的方式: 1)使用DOM(或DOM4J.JDOM) 2 ...

  3. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

  4. Dom--属性以及创建标签

    一.Dom属性 1.1 设置属性(setAttribute) 设置某个标签的属性,setAttribute(key,value) <body> <div> <input ...

  5. 使用HTML、jquery、DOM创建文本

    <html> <head> <meta charset="utf-8"> <meta charset="utf-8"& ...

  6. DOM操作标签、事件绑定、jQuery框架/类库

    DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' # 动态创建一个a标签并添加到页面指定 ...

  7. DOM操作标签，事件绑定，jQuery框架

    DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' 基本使用 动态创建一个标签 var 变 ...

  8. js创建标签的方法--依赖于jquery

    /** * 创建标签,传入一个对象,返回一个完整的标签 * @param {Object.attribute} tag 标签 * @param {Object.attribute} attribute ...

  9. 使用script创建标签添加属性值和添加样式

    <mark>使用script创建标签和给标签属性值以及样式的方法</mark><script> window.onload=function(){ var btn= ...

  10. [原创]Devexpress XtraReports 系列 10 创建标签报表

    今天这篇是Dx Reports 基础初级系列的最后一篇了.以后如果有什么高级的应用,应该另开一个中级使用系列. 昨天发表了Devexpress XtraReports系列第九篇[原创]Devexpre ...

随机推荐

  1. (转)Apache与Tomcat 区别联系

    Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML.PHP.JSP.Perl等开发过程中,需要准确掌握其各自特点,选择最佳的服务器配置. Apache是web服 ...

  2. Excel Countif函数用法

    公式:=COUNTIF(范围,条件) 例1: 统计A1:A11当中,等于数字3的单元格,结果是4个. 例2:还可以进行大于(>),大于等于(>=),小于(<),小于等于(<=) ...

  3. 老生常谈之SQL Server （行转列，列转行）

    Open the first article 在本文章中主要介绍以下内容: 1.静态行转列 2.静态列转行 3.动态行转列 4.动态列转行 1.静态行转列 --静态的行转列 --新建一个科目成绩表 - ...

  4. [BZOJ 1409] Password

    贴一发题面 1409: Password Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 242  Solved: 82[Submit][Status][D ...

  5. [COGS 1065] 绿豆蛙的归宿

    先贴题面w 1065. [Nescafe19] 绿豆蛙的归宿 ★   输入文件:ldfrog.in   输出文件:ldfrog.out   简单对比时间限制:1 s   内存限制:128 MB 随着新 ...

  6. android-iconify 使用详解

    android-iconify 使用详解 有图有真相 1.android-iconify简介 iconify的github地址:https://github.com/JoanZapata/androi ...

  7. ES6数字扩展

    前面的话 本文将详细介绍ES6数字扩展 指数运算符 ES2016引入的唯一一个JS语法变化是求幂运算符,它是一种将指数应用于基数的数学运算.JS已有的Math.pow()方法可以执行求幂运算,但它也是 ...

  8. 花了一年时间开发出来的EZNest 自动套料软件

    随着国内钢结构制造业的迅猛发展,市场竞争也愈演愈烈.近来钢材价格的大幅攀升,节约用材已成为企制胜的戈键,提高钢材的利用车自然就成了目前许多企业十分关心的一件事.对十大型钢结构生产制造商来说,如留在传统 ...

  9. 如何免费使用jrebel 和eclipse 项目配合完成热部署功能

    天,感谢王同学分享了热部署插件,jrebel,说修改后台代码可以不用重启tomcat,于是立即下载使用....本来很简单的一个事情,因为参照了网上各种帖子,结果坑的不行....所以把自己的经验分享一下 ...

  10. Python中的re模块--正则表达式

    Python中的re模块--正则表达式 使用match从字符串开头匹配 以匹配国内手机号为例,通常手机号为11位,以1开头.大概是这样13509094747,(这个号码是我随便写的,请不要拨打),我们 ...