<!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. CentOS搭建NodeJs服务器—Mongodb安装

    1.下载Mongodb 直接下载(下载很慢) cd /mongdb wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-amazon- ...

  2. 对Moment.js的研究

    创建npm install moment --save-dev 日期格式化 moment().format('MMMM Do YYYY, h:mm:ss a'); // 六月 4日 2019, 6:2 ...

  3. 进行移动端rem适配

    (function (designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElemen ...

  4. SPOJ 694 || 705 Distinct Substrings ( 后缀数组 && 不同子串的个数 )

    题意 : 对于给出的串,输出其不同长度的子串的种类数 分析 : 有一个事实就是每一个子串必定是某一个后缀的前缀,换句话说就是每一个后缀的的每一个前缀都代表着一个子串,那么如何在这么多子串or后缀的前缀 ...

  5. 树状数组板子 x

    树状数组! 参考 http://www.cnblogs.com/zzyh/p/6992148.html 洛谷 P3374 [模板]树状数组 1 题目描述 如题,已知一个数列,你需要进行下面两种操作: ...

  6. 洛谷p3956 棋盘（NOIP2017 t3）

    在noip考场上本来以为只能骗暴力分,没想到最后A了: 本蒟蒻的做法比较简(zhi)单(zhang):记忆化深搜(考场上本来是想打广搜的,但我深搜稳一点就这样打了): 具体:每个点用一个f数组记录当前 ...

  7. 3D Computer Grapihcs Using OpenGL - 07 Passing Data from Vertex to Fragment Shader

    上节的最后我们实现了两个绿色的三角形,而绿色是直接在Fragment Shader中指定的. 这节我们将为这两个三角形进行更加自由的着色——五个顶点各自使用不同的颜色. 要实现这个目的,我们分两步进行 ...

  8. 阿里云配置通用服务的坑 ssh: connect to host 47.103.101.102 port 22: Connection refused

    1.~ wjw$ ssh root@47.103.101.102 ssh: connect to host 47.103.101.102 port 22: Connection refused ssh ...

  9. MacOS X 安装OpenCV3.2

    windows平台和linux平台安装参见 官方文档:http://docs.opencv.org/3.2.0/da/df6/tutorial_py_table_of_contents_setup.h ...

  10. Linux网卡驱动分析

    以太网(Ethernet)是一种计算机局域网组网技术,基于IEEE 802.3标准,它规定了包括物理层的连线.电信号和介质访问层协议. Ethernet接口的实质是MAC通过MII总线控制PHY的过程 ...