<!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. 命令——tree

    tree——以树形结构显示目录文件 [root@centos71 ~]# yum provides tree Loaded plugins: fastestmirror Loading mirror ...

  2. delphi exec error 错误处理

    有时引用了三方jar后报错 [Exec Error] The command "PATH ..."" exited with code 1 解决方法 1.检测jar文件路 ...

  3. UML规则笔记

    一.类 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相同属性.操作.关系的对象集合的总称. 在系统中,每个类都具有一定的职责,职责指的是类要完成什么样的功能,要承担什么样的义务 ...

  4. 【PowerOJ1744&网络流24题】方格取数问题(最小割)

    题意: n,m<=30 思路: [问题分析] 二分图点权最大独立集,转化为最小割模型,从而用最大流解决. [建模方法] 首先把棋盘黑白染色,使相邻格子颜色不同,所有黑色格子看做二分图X集合中顶点 ...

  5. Internet History, Technology, and Security(week7)——Technology: Application Protocols

    Layer 4: Applications Application Layer TCP提供了“a reliable pipe”(一个坚固的水管)连接用户和服务器,确保了数据能准确不出意外地传输,所以A ...

  6. android 任务栈及启动模式

    1.一个应用程序一般都是由多个activity组成的.2.任务栈(task stack)(别名back stack后退栈) 记录存放用户开启的activity的.3.一个应用程序一被开启系统就给他分配 ...

  7. Android 获取屏幕尺寸与密度(转载)

    android中获取屏幕的长于宽,参考了网上有很多代码,但结果与实际不符,如我的手机是i9000,屏幕大小是480*800px,得到的结果却为320*533 结果很不靠谱,于是自己写了几行代码,亲测一 ...

  8. [design pattern](2) Observer

    前言 在上一个博客中我们介绍了Strategy模式,它是行为型模式麾下的一员大将.那么本博客我们来学习一下行为型模式麾下的另一员大将Observer模式. 思考题 老套路,先来思考下面的问题: 问题: ...

  9. Alexa TOP 100万的域名列表

    Alexa是一家专门发布网站世界排名的网站,是亚马逊公司的一家子公司.Alexa每天在网上搜集多达几十亿的网址链接,而且为其中的每一个网站进行了排名. Alexa通过Alexa官网查询好像TOP 50 ...

  10. 大数据笔记(二十)——NoSQL数据库之MemCached

    一.为什么要把数据存入内存? 1.原因:快2.常见的内存数据库 (*)MemCached:看成Redis的前身,严格来说Memcached的不能叫数据库,原因:不支持持久化 (*)Redis:内存数据 ...