<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" onclick="AddEle1();" value="+++">

    <input type="button" onclick="AddEle2();" value="+++2">

    <div id="i1">

    <input type="text"/>

        <hr/>

    </div>

    <script>

        function AddEle1() {

//            创建一个标签，将标签添加到指定标签里面

            var tag="<p><input type='text'/></p> ";

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

//            四个参数beforeBegin、 afterBegin、beforeEnd、afterEnd

        }

        function AddEle2() {

//            创建一个标签，将标签添加到指定标签里面

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

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

            tag.style.fontSize='19px';

            tag.style.color='red';

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

            p.appendChild(tag)

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

        }

    </script>

</body>

</html>

　　

使用JS增加标签的更多相关文章

  1. JS添加标签效果

    JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...

  2. JS修改标签中的文本且不影响其中标签

    /********************************************************************* * JS修改标签中的文本且不影响其中标签 * 说明: * ...

  3. js 中标签的增删 方法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. js增加收藏

    <html> <span style="white-space:pre"> </span><head> <span style ...

  5. js 父子标签同时设置onclick，子标签触发父标签onclick解决办法

    js 父子标签同时设置onclick,子标签触发父标签onclick 或 子标签为a 先触发onclick 再触发 a 的 href: 解决方案:在子标签的onclick里写 var ev = win ...

  6. JS获取标签内容的方法

    JS获取标签内容的方法 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. html页面中插入html的标签,JS控制标签属性

    html页面中插入html的标签 方法1: 使用标签: <textara> </textara>标签 方法2: 使用JS: document.getElementById(&q ...

  8. 1kb 的 placeholder.js 增加 img 标签使用方式

    预览 官方网站示例. 项目 github 地址 使用 引入 placeholder.js 到你的前段代码中: <script src="placeholder.js"> ...

  9. 原生js文字标签云上下滚动播放

    效果:http://hovertree.com/texiao/js/25/ 效果图: 代码如下: <!DOCTYPE html> <html> <head>< ...

随机推荐

  1. <el-menu>菜单标签（里面可以包括：<el-submenu>和<el-menu-item>）

    <el-menu> 1.router属性,若使用router属性menu-item的index将对应router的path属性 2.mode,下拉菜单的模式分为horizontal和ver ...

  2. 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\......”--“拒绝访问。 ”错误

    1.通常的解决方法:原因是由于系统目录下的Temp目录无相应的权限所致,具体操作如下: C:\Windows\temp-->属性-->安全-->编辑-->添加NETWORK S ...

  3. sqlserver数据库脱机和分离的区别

    脱机和分离的区别: 分离和脱机都可以使数据库不能再被使用,但是分离后需要附加才能使用,而脱机后只需联机就可以用了. 附加数据库报错: 无法打开物理文件 XXX.mdf".操作系统错误 5:& ...

  4. React Native 之TouchableOpacity组件

    使用TouchableOpacity组件 实现单击事件只需要声明onPress属性即可,其他同理,实现onPressIn,onPressOut,onLongPress constructor(prop ...

  5. luogu 4381 [IOI2008]Island 单调队列 + 基环树直径 + tarjan

    Description 你将要游览一个有N个岛屿的公园.从每一个岛i出发,只建造一座桥.桥的长度以Li表示.公园内总共有N座桥.尽管每座桥由一个岛连到另一个岛,但每座桥均可以双向行走.同时,每一对这样 ...

  6. 博弈论 x

    ——关于博弈论 四道例题带你走进博弈论~ (考虑必败态,必胜态) Ps:要理解这种思想,首先要明白什么叫必败态.说简单点,必败态就是“在对方使用最优策略时,无论做出什么决策都会导致失败的局面”.其他的 ...

  7. websocket 传输数据帧打包 (client端)

    /* Vertion: 0.2.1 date: 2015.8.11 content: gcc 编译通过 */ //websocket 传输数据帧打包 client端 //参数:src 为输入字符串 / ...

  8. SpringBoot属性配置-第三章

    1.application.yml配置#自定义参数对象book: name: A id: 1 page: 100 2.创建实体类: /** * @Auther: youqc * @Date: 2018 ...

  9. HDU 5172 GTY's gay friends （线段树）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5172 题意: 给你一个n个数的数组,m次询问,询问在[L, R] 这个区间里面有没有 [1, R-L+ ...

  10. Python发送邮件（常见四种邮件内容）

    Python发送邮件(常见四种邮件内容) 转载 2017年03月03日 17:17:04   转自:http://lizhenliang.blog.51cto.com/7876557/1875330 ...