<!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. 字符串截取模板 && POJ 3450、3080 ( 暴力枚举子串 && KMP匹配 )

    //截取字符串 ch 的 st~en 这一段子串返回子串的首地址 //注意用完需要根据需要最后free()掉 char* substring(char* ch,int st,int en) { ; c ...

  2. Java——常用类（String）

    [常用类]   <1>字符串相关类(String.StringBuffer)   <2>基本数据类型包装类   <3>Math类   <4>File类 ...

  3. 170814-17关于javaweb的知识点

    1.   静态web项目.动态web项目区别                                         WEB-INF                               ...

  4. [CSP-S模拟测试]:骆驼（模拟+构造）

    题目描述 我们都熟悉走马步,现在我们定义一种新的移动方式——骆驼步,它在一个国际棋盘上的移动规则是这样的. 以看出,骆驼步可以向八个方向走动,且不能走出棋盘范围. 现在给出一个$N\times N$的 ...

  5. WPF Good UI 2

    自定义一个漂亮的window窗口UI <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation& ...

  6. centos修改时区，同步时间

    查看当前系统时区 ls -la /etc/localtime 查看支持的时区 timedatectl list-timezones # 查看所有时区 timedatectl list-timezone ...

  7. DRF中的视图集的使用

    1.说明:DRF框架中的视图集: 在drf开发接口中,使用GenericAPIView和视图扩展类结合起来完成接口功能是一件很常见的事情,所以,drf的作者帮我们提前把  GenericAPIView ...

  8. Eclipse SVN插件版本

    http://subclipse.tigris.org/servlets/ProjectProcess;jsessionid=FE8EBF532DA84BAFF9543019D01A1B15?page ...

  9. 必须Mark！43个优秀的Swift开源项目推荐(转)

    作为一门集百家之长的新语言,Swift拥有着苹果先天的生态优势,而其在GitHub上各种优秀的开源项目也层出不穷.本文作者@SwiftLanguage从2014年6月苹果发布Swift语言以来,便通过 ...

  10. clientdataset 修改记录 成功

    procedure TForm7.Label33Click(Sender: TObject);var i,j,k:integer;begin i:=self.DBGrid1.SelectedField ...