<!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. 前端node面试题之---对比JS和NodeJS的区别

    区别: 1.JS运行在浏览器端,用于用户的交互效果,NodeJS运行在服务器端,用于服务器的操作,例如,Web服务器创建,数据库的操作,文件的操作等 2.JS运行在浏览器端,存在多个JS解释器,存在兼 ...

  2. 查询重复数据group by menu_id having count(menu_id)>1

    select * from sys_power_menu WHERE menu_id in ( select menu_id from  sys_power_menu group by menu_id ...

  3. 校赛 你的粪坑V2

    原题 今天举办程序设计比赛,2点30分开始,然而你睡到了2点25分,紧张的你将头发梳成大人模样,敷上一层最贵的面膜,穿着滑板鞋,以飞一般的速度奔向计算机学院准备参加程序设计竞赛!冠军是你的! 然而路上 ...

  4. 3D Computer Grapihcs Using OpenGL - 11 Model View Projection Matrices

    本节我们将绘制一个3维物体,立方体. 如果要渲染3D物体,我们需要了解MVP(Model View Projection),它表示三个转换矩阵.实际上这个名字不够明确,更加确切的释义如下: Model ...

  5. 源码搭建mysql5.7.20

    转载过来的文章,只是借用原文样式与框架,根据自己实验环境进行全面改动,仅供参考! 使用yum安装的MySQL一般版本比较旧,但是运行稳定.如果想要尝试最新的功能或者需要指定特殊的功能的话,就需要手工进 ...

  6. qbzt day3 下午（好难）

    内容提要 有关数据结构的例题 求逆序对数 统计每个数前面有多少比他大的数 开数组表示这个数之前0~9这些数出现了几次 动态将某个点加一,动态求前缀和 用树状数组 如果数太大了怎么办? 离散化 步骤:先 ...

  7. CMD模块打包部署总结

    目前线上系统利用Seajs做模板化,但是没有对js和css进行打包,在这次简历搜索优化项目里我尝试对gulp插件对Seajs模块打包. 安装gulp和相关插件 npm install -g gulp ...

  8. 豆瓣镜像安装python库

  9. 十七、jenkins运行robotframework脚本，配置自动发送邮件

    一.配置系统管理-系统设置: A.系统管理--系统设置--Jenkins Location-系统管理员邮件地址:配置管理员邮箱全称(qq,163等都可以) B.配置管理员邮箱属性: 1.输入smtp服 ...

  10. fedora禁用(开机启动)服务和进程管理

    首先要查看有哪些(开机启动)服务 chkconfig --list 或者: systemctl list-units 然后, 根据需要进行禁用服务的开机启动: chkconfig service_na ...