1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <input type="button" onclick="AddEle1();" value="+++">
  9.     <input type="button" onclick="AddEle2();" value="+++2">
  10.     <div id="i1">
  11.     <input type="text"/>
  12.         <hr/>
  13.     </div>
  14.     <script>
  15.         function AddEle1() {
  16. //            创建一个标签，将标签添加到指定标签里面
  17.             var tag="<p><input type='text'/></p> ";
  18.             document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
  19. //            四个参数beforeBegin、 afterBegin、beforeEnd、afterEnd
  20.         }
  21.         function AddEle2() {
  22. //            创建一个标签，将标签添加到指定标签里面
  23.             var tag=document.createElement('input');
  24.             tag.setAttribute('type','text');
  25.             tag.style.fontSize='19px';
  26.             tag.style.color='red';
  27.  
  28.             var p =document.createElement('p');
  29.             p.appendChild(tag)
  30.             document.getElementById('i1').appendChild(p)
  31.         }
  32.     </script>
  33. </body>
  34. </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. 移动web开发之像素和DPR详解

    前话: 像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于这些问题,可能就不清楚了.本文将介绍关于像素的相关知识 什么 ...

  2. 借用的对vue-cli配置对解析

  3. Java面试之基础篇（4）

    31.String s = new String("xyz");创建了几个StringObject?是否可以继承String类? 两个或一个都有可能,”xyz”对应一个对象,这个对 ...

  4. 【JavaScript】对象 obj.name 语法与 obj[name]语法

    obj.name ==> obj["name"]  底层的自动转化,所以直接写 obj["name"] 效率会高一些 var obj = { name: ...

  5. php给配置数组赋默认值奇

    extract($this->_config['connection'] + array( 'database' => '', 'hostname' => '', 'username ...

  6. E. Compress Words

    E. Compress Words KMP #include<bits/stdc++.h> using namespace std; ]; int len; void getNext(ch ...

  7. mui.ajax中文乱码

    估计这是个bug: //mui 的 ajax 中文乱码 var url = 'http://api.juheapi.com/japi/toh?key=1f26c107d8864bdfb98202bc3 ...

  8. layer系列之弹层layer.prompt

    layer官网:https://www.layui.com/doc/modules/layer.html layer在线调试:http://layer.layui.com/ 如何使用layer.pro ...

  9. wow64 32位进程中切换64位模式,取回64位寄存器值

    32位dbg中编辑的: 7711E9D3 | 6A | | 7711E9D5 | E8 | 7711E9DA | | | 7711E9DE | CB | ret far | 6A E8 CB 64位d ...

  10. 十八、浏览器不能打开jenkins报告，报错Opening Robot Framework report failed

    解决方案一:(推荐) 打开jenkins----系统管理---输入:  System.setProperty("hudson.model.DirectoryBrowserSupport.CS ...