js中insertAdjacentHTML的玩法
原型:insertAdajcentHTML(swhere,stext) insertAdjacentHTML方法:在指定的地方插入html标签语句 2.afterBegin:插入到标签开始标记之后 3.beforeEnd:插入到标签结束标记前 4.afterEnd:插入到标签结束标记后 stext:要插入的内容 <html> |
这个例子可以更直观的查看它们的作用:
<head>
<title>24.htm insertAdjacentHTML插入新内容</title>
<script language="jscript">
function addsome()
{
document.all.paral.insertAdjacentHTML("afterBegin","<h1>在文本前容器内插入内容</h1>");
document.all.paral.insertAdjacentHTML("beforeEnd","<h2>在文本后容器内插入内容</h2>");
document.all.paral.insertAdjacentHTML("beforeBegin","<h4>在文本前容器外插入内容</h1>");
document.all.paral.insertAdjacentHTML("afterEnd","<h5>在文本后容器外插入内容</h2>");
}
</script>
</head>
<body onload="addsome()">
<div id="paral" style="fontsize:6;color='#ff00ff'">原来的内容</div><hr>
</body>
</html>
=================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script>
var num=0;
var No_sys=0;
function Add_button(){
if(No_sys<8){
c_input.insertAdjacentHTML("beforeEnd","<div id=\"bar"+num+"\"
oncontextmenu=\"Remove_button(bar"+num+");return false\"
style=\"background:red;width:40;height:20\">"+num+"</div>");
num++;
No_sys++;
}
}
function Remove_button(obj){
obj.removeNode(true);
No_sys--;
}
</script>
<input type="button" onclick="Add_button()" value="动态加">
<input type="button" onclick="alert(c_input.innerHTML)" value="看">
<div id="c_input">
</div>
</BODY>
</HTML>
js中insertAdjacentHTML的玩法的更多相关文章
- javascript中的数字玩法,颠覆你的眼睛
1.JavaScript中的数字中有一些很奇葩的现象. 在Chrome控制台中可以自己做一下实验: 1 === 1.0 ; //true 习惯了强类型语言,如java,c,OC看到这个结论还是有点小迷 ...
- 性能计数器在.NET Core中的新玩法
传统的.NET Framework提供的System.Diagnostics.PerformanceCounter类型可以帮助我们收集Windows操作系统下物理机或者进程的性能指标,基于Perfor ...
- 聊聊 C++ 和 C# 中的 lambda 玩法
这几天在看 C++ 的 lambda 表达式,挺有意思,这个标准是在 C11标准 加进去的,也就是 2011 年,相比 C# 2007 还晚了个 4 年, Lambda 这东西非常好用,会上瘾,今天我 ...
- 聊聊 C# 和 C++ 中的 泛型模板 底层玩法
最近在看 C++ 的方法和类模板,我就在想 C# 中也是有这个概念的,不过叫法不一样,人家叫模板,我们叫泛型,哈哈,有点意思,这一篇我们来聊聊它们底层是怎么玩的? 一:C++ 中的模板玩法 毕竟 C+ ...
- ES7前端异步玩法:async/await理解 js原生API妙用(一)
ES7前端异步玩法:async/await理解 在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是“异步”的意思,a ...
- 接口测试的N中玩法
在我看来接口测试相对其他类型的测试是比较简单的.对于最常见的HTTP接口,只需要知道接口的 URL.方法.参数类型.返回值 ... 就可以对接口进行测试了. apifox 如果你是入门级选手,那么ap ...
- 【转】js 中导出excel 较长数字串会变为科学计数法
[转]js 中导出excel 较长数字串会变成科学计数法 在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串 ...
- 【第1期】腾讯云的1001种玩法征集,Ipad mini和Kindle 等你拿!(文章评审中)
版权声明:本文由阁主的小跟班原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/695994001482226944 来源:腾云 ...
- 【转载】总结一下Android中主题(Theme)的正确玩法
http://www.cnblogs.com/zhouyou96/p/5323138.html 总结一下Android中主题(Theme)的正确玩法 在AndroidManifest.xml文件中有& ...
随机推荐
- 收藏一下这个微软MVP的老外博客
原文发布时间为:2011-04-20 -- 来源于本人的百度文章 [由搬家工具导入] http://blog.overridethis.com/blog http://haacked.com htt ...
- wireshark过滤数据
Wireshark使用WinPCAP作为接口,直接与网卡进行数据报文交换.用来获取网络数据封包,包括http,TCP,UDP,等网络协议包.使用者可以以免费的代价取得软件与其源代码,并拥有针对其源代码 ...
- PyCharm 快捷键总结
运行 Shift+alt+F10 执行程序 调试 Shift+alt+F9 Debug调试 Shift + F9 对当前文件进行Debug F8 调试模式下 跳过 F7 调试模式下 进入 F9 快速调 ...
- hdu 2654(欧拉函数)
Become A Hero Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- Codeforces Gym101522 D.Distribution of Days-算日期 (La Salle-Pui Ching Programming Challenge 培正喇沙編程挑戰賽 2017)
D.Distribution of Days The Gregorian calendar is internationally the most widely used civil calendar ...
- Python环境安装与配置
1.官网下载:https://www.python.org/选择不同的版本 2.进入运行:使用pip安装selenium 3.设置pip的环境变量 4.安装后使用pip(一个Python包管理工具)安 ...
- 2016北京集训测试赛(十六)Problem C: ball
Solution 这是一道好题. 考虑球体的体积是怎么计算的: 我们令\(f_k(r)\)表示\(x\)维单位球的体积, 则 \[ f_k(1) = \int_{-1}^1 f_{k - 1}(\sq ...
- char可不可以存汉字
常见的面试题:char类型的变量可不可以存汉字 答案是可以的,char类型中存储的是Unicode编码,Unicode编码中是存在存在中文的,所以Char自然可以存储汉字,但是!仅限于Unicode中 ...
- Android中的多线程断点续传
Android多线程断点下载的代码流程解析: 运行效果图: 实现流程全解析: Step 1:创建一个用来记录线程下载信息的表 创建数据库表,于是乎我们创建一个数据库的管理器类,继承SQLiteOpen ...
- 【ActiveMQ】1.下载安装启动使用
官网下载:http://activemq.apache.org/activemq-5121-release.html 官网指导文档:http://activemq.apache.org/version ...