使用JS增加标签
<!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增加标签的更多相关文章
- JS添加标签效果
JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...
- JS修改标签中的文本且不影响其中标签
/********************************************************************* * JS修改标签中的文本且不影响其中标签 * 说明: * ...
- js 中标签的增删 方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js增加收藏
<html> <span style="white-space:pre"> </span><head> <span style ...
- js 父子标签同时设置onclick,子标签触发父标签onclick解决办法
js 父子标签同时设置onclick,子标签触发父标签onclick 或 子标签为a 先触发onclick 再触发 a 的 href: 解决方案:在子标签的onclick里写 var ev = win ...
- JS获取标签内容的方法
JS获取标签内容的方法 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- html页面中插入html的标签,JS控制标签属性
html页面中插入html的标签 方法1: 使用标签: <textara> </textara>标签 方法2: 使用JS: document.getElementById(&q ...
- 1kb 的 placeholder.js 增加 img 标签使用方式
预览 官方网站示例. 项目 github 地址 使用 引入 placeholder.js 到你的前段代码中: <script src="placeholder.js"> ...
- 原生js文字标签云上下滚动播放
效果:http://hovertree.com/texiao/js/25/ 效果图: 代码如下: <!DOCTYPE html> <html> <head>< ...
随机推荐
- 【ZJOI2008】树的统计
题目 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. QMAX u v: ...
- java伪代码读后感
愚公,在这位名家身上,浓缩了项目的组织者,团队经理,编程人员,技术分析师等众多角色的优秀素质.原始需求的产生“惩山北之塞,出入之迁”项目沟通的基本方式“聚室而谋之”项目的目标“毕力平险,指通豫南,达于 ...
- React 之React.createContext
使用Context,可以跨越组件进行数据传递 import React from 'react'; import ReactDOM from 'react-dom'; const ThemeConte ...
- $FFT/NTT/FWT$题单&简要题解
打算写一个多项式总结. 虽然自己菜得太真实了. 好像四级标题太小了,下次写博客的时候再考虑一下. 模板 \(FFT\)模板 #include <iostream> #include < ...
- Windows下zookeeper安装及配置
zookeeper有单机.伪集群.集群三种部署方式,可根据自己对可靠性的需求选择合适的部署方式.本章主要讲述单机部署方式. 系统要求 zookeeper可以运行在多种系统平台上面,表1展示了zk支持的 ...
- 我用HTML写简历
本文属于原创文章,转载请注明--来自桃源小盼的博客 起因 每次换工作写简历都是有点痛苦的事情,尤其是下载word模板,各种注册流程,有的还得买积分,冲会员,甚是不爽.就算下载好了,修改其中的一些细节也 ...
- java将url里面的中文改成ASCII字符集 和 SCII字符集 改成 中文
package com.example.demo; import java.io.UnsupportedEncodingException; import java.net.URLDecoder; / ...
- FutureTask的用法以及两种常用的使用场景
参考博客:https://blog.csdn.net/linchunquan/article/details/22382487 FutureTask可用于异步获取执行结果或取消执行任务的场景.通过传入 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_05 List集合_2_Arraylist集合
数组查询快,增删慢. 不是同步的就是多线程的 ArrayList其实就是一个数组 这是add方法 它在添加元素的时候会创建新的数组,然后把元素复制过来.这就是为什么查询快,增删们的原因. 每次增加元素 ...
- 接口开发01--mock接口
开发接口的常见场景: 1.mock接口,模拟一些接口,在别的接口没有开发好的时候,你需要测试,可以先模拟一个假接口来测试.比如常见 2.若需要调用第三方接口时,比如支付接口. 3.查看数据,比如开放数 ...