<!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. (转)Java多线程编程总结

    -------------------------------------------------------------------------------------------------   ...

  2. OP查阅网站

    1)http://www.zhdba.com/mysqlops/ 2)

  3. ctf中常见注入题源码及脚本分析

    1.代码审计发现 这里没有用escape_string,因此存在注入. function show($username){ global $conn; $sql = "select role ...

  4. Word2016“此功能看似已中断 并需要修复”问题解决办法

    Word2016"此功能看似已中断 并需要修复"问题解决办法 修复步骤: 1. 按Windows 键+R键,输入"regedit"打开注册表. 2.找到以下键值 ...

  5. spring Bean类自动装载实现

    先贴spring的开发文档,有助于大家学习http://shouce.jb51.net/spring/beans.html#beans-factory-class 一直想研究一下spring bean ...

  6. Head First 设计模式 第6章 命令模式

    第6章 命令模式 在本章,我们将把封装带到一个全新的境界,把方法调用封装起来.没错,通过方法调用,我们可以把运算块包装成型.所以,调用此运算的对象不需要关心运算是如何进行的,只要知道如何使用包装成型的 ...

  7. Spring中各jar包的作用

    Spring AOP:Spring的面向切面编程,提供AOP(面向切面编程)的实现 Spring Aspects:Spring提供的对AspectJ框架的整合 Spring Beans:Spring ...

  8. [算法题] Search in Rotated Sorted Array ii

    题目内容 题目来源:LeetCode Suppose an array sorted in ascending order is rotated at some pivot unknown to yo ...

  9. Linux操作系统-命令-free

    在看过网友写的一篇名为<Buffer和Cache的区别>http://zhumeng8337797.blog.163.com/blog/static/1007689142011102447 ...

  10. tcpdump抓包分析详解

    說實在的,對於 tcpdump 這個軟體來說,你甚至可以說這個軟體其實就是個駭客軟體, 因為他不但可以分析封包的流向,連封包的內容也可以進行『監聽』, 如果你使用的傳輸資料是明碼的話,不得了,在 ro ...