<!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. Hybris商品图片导入与压缩有关的配置

    1.   在电脑上安装 ImageMagick 软件(windows平台还需要安装VC++),下载路径:http://www.imagemagick.org/script/download.php#w ...

  2. HDOJ-2009 求数列的和

    Problem Description 数列的定义如下:数列的第一项为n,以后各项为前一项的平方根,求数列的前m项的和.   Input 输入数据有多组,每组占一行,由两个整数n(n<10000 ...

  3. jqthumb.js缩略图插件-让缩略图正常显示而不变形

    插件介绍 项目中有图片的时候,有的宽大于高,有的宽小于高,尤其在做图片列表的时候,经常发现缩略图会有变形的.我们怎样来解决这一问题呢. 方法一:用photoshop来处理缩略图.小的项目还可以,大的项 ...

  4. 刚装的系统C盘占空间特别大怎么办？关闭win7的系统还原和调整虚拟内存

    刚装的win7系统,C盘占空间特别大,清理垃圾,清理碎片之后还是特别大,检查一下,系统才20G,C盘却占用了40G,其实是没有关闭系统还原,再就是没有调整虚拟内存.win7旗舰版(其他版本也可能这样, ...

  5. POJ 1113 Wall （凸包）

    Description Once upon a time there was a greedy King who ordered his chief Architect to build a wall ...

  6. Ubuntu下安装codeblocks

    ubuntu 16.04LTS 下Code::Blocks 16.01 安装 Code::Blocks 是一个开放源码的全功能的跨平台C/C++集成开发环境. Code::Blocks是开放源码软件. ...

  7. mybatis 详解（四）------properties以及别名定义

    上一篇博客我们介绍了mybatis的增删改查入门实例,我们发现在 mybatis-configuration.xml 的配置文件中,对数据库的配置都是硬编码在这个xml文件中,如下图,那么我们如何改进 ...

  8. swift3.0 从相册选取或者拍照上传图片至阿里云OSS

    导入相应的库 import Photos import AliyunOSSiOS 选取照片需要继承 UIImagePickerControllerDelegate,UINavigationContro ...

  9. 优化hexo访问速度-将hexo部署到云主机VPS

    写在开始 一开始将自己hexo部署到github,结果发现打开页面速度有点慢,然后又将其同时部署到coding,实现双线路访问,国内解析记录到coding,国外解析到github,这样确实网站的速度能 ...

  10. android项目数据库升级跨版本管理解决方案

    目前公司android项目普遍使用框架对数据库进行操作,数据库表与数据实体都具有严格的对应的关系,但是数据库的升依赖不同版本间的升级脚本,如果应用跨多版本进行升级时,当缺失部分升级脚本时就会导致应用异 ...