原型：insertAdajcentHTML(swhere,stext)

insertAdjacentHTML方法：在指定的地方插入html标签语句 
参数：
swhere: 指定插入html标签语句的地方，有四种值可用：
1.beforeBegin: 插入到标签开始前

2.afterBegin:插入到标签开始标记之后

3.beforeEnd:插入到标签结束标记前

4.afterEnd:插入到标签结束标记后

stext：要插入的内容

<html>
   <head>
    <script language="javascript">
       function myfun()
         {
             var obj = document.getElementById("btn1");
              obj.insertAdjacentHTML("afterEnd","<br><input name=\"txt1\">");
         }
    </script>
   </head>
   <body>
     <input name="txt">
     <input id="btn1" name="btn1" type="button" value="更多..." onclick="myfun()">
   </body>
</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的玩法的更多相关文章

  1. javascript中的数字玩法，颠覆你的眼睛

    1.JavaScript中的数字中有一些很奇葩的现象. 在Chrome控制台中可以自己做一下实验: 1 === 1.0 ; //true 习惯了强类型语言,如java,c,OC看到这个结论还是有点小迷 ...

  2. 性能计数器在.NET Core中的新玩法

    传统的.NET Framework提供的System.Diagnostics.PerformanceCounter类型可以帮助我们收集Windows操作系统下物理机或者进程的性能指标,基于Perfor ...

  3. 聊聊 C++ 和 C# 中的 lambda 玩法

    这几天在看 C++ 的 lambda 表达式,挺有意思,这个标准是在 C11标准 加进去的,也就是 2011 年,相比 C# 2007 还晚了个 4 年, Lambda 这东西非常好用,会上瘾,今天我 ...

  4. 聊聊 C# 和 C++ 中的 泛型模板 底层玩法

    最近在看 C++ 的方法和类模板,我就在想 C# 中也是有这个概念的,不过叫法不一样,人家叫模板,我们叫泛型,哈哈,有点意思,这一篇我们来聊聊它们底层是怎么玩的? 一:C++ 中的模板玩法 毕竟 C+ ...

  5. ES7前端异步玩法：async/await理解 js原生API妙用（一）

    ES7前端异步玩法:async/await理解   在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是“异步”的意思,a ...

  6. 接口测试的N中玩法

    在我看来接口测试相对其他类型的测试是比较简单的.对于最常见的HTTP接口,只需要知道接口的 URL.方法.参数类型.返回值 ... 就可以对接口进行测试了. apifox 如果你是入门级选手,那么ap ...

  7. 【转】js 中导出excel 较长数字串会变为科学计数法

    [转]js 中导出excel 较长数字串会变成科学计数法 在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串 ...

  8. 【第1期】腾讯云的1001种玩法征集，Ipad mini和Kindle 等你拿!(文章评审中)

    版权声明:本文由阁主的小跟班原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/695994001482226944 来源:腾云 ...

  9. 【转载】总结一下Android中主题(Theme)的正确玩法

    http://www.cnblogs.com/zhouyou96/p/5323138.html 总结一下Android中主题(Theme)的正确玩法 在AndroidManifest.xml文件中有& ...

随机推荐

  1. Linux Mint---安装篇

    先前接触过Debian6,埋头折腾已经是好几年前的事情了,后来就放下了,现在工作之余时间比较多,正好debian8.1出来了,于是乎装了个debian用,结果,自己其实还是一个菜蛋而已,连软件源怎么设 ...

  2. 5种你未必知道的JS和CSS交互的方法

    随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css ...

  3. Chrome扩展修改页面代码执行环境的方法

    Chrome的扩展程序可以通过content scripts向页面中注入js代码,所注入的js代码能够对页面中所有的DOM对象进行操作.由于Chrome在js执行环境上对页面代码和content sc ...

  4. Python Challenge 第九关

    第九关只有一幅图,上面有一些黑点.网页名字叫:connect the dots.可能是要把这些点连起来. 查看源代码,果然有两个整数集合 first 和 second.并且有个提示:first+sec ...

  5. PHP二维数组排序研究

    前几天在项目中碰到了一个问题,在做商城的时候,要对一个店铺里所有商品进行价格排序,而且每一种商品都拥有多个规格,要取到所有商品中所有规格的最低价和最高价,发现PHP有很友好的函数帮助我们进行筛选. 使 ...

  6. HDU 1021 Fibonacci Again【打表找规律】

    Fibonacci Again Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  7. Azure CDN 服务详解

    Azure CDN概述   Azure CDN(内容分发网络)是一种用于分发高带宽内容的全球CDN解决方案,它可以托管在Azure中,也可以通过在任何其他位置,借助Azure CDN,可以托管到任何其 ...

  8. eclipse 国际化 $NON-NLS-1$ 含义

    一.$NON-NLS-1$ 含义 Eclipse 如果每行代码里有这个字符串:$NON-NLS-1$ 表示:这一行的第一个字符串是不需要国际化的.同理$NON-NLS-2$,$NON-NLS-3$.. ...

  9. 我眼中的AI

    !!!!本文禁止转载,引用,仅供观看 最初了解人工智能是在我上大二的时候,在看头条的时候经常看到有关人工智能的事情,当时的我和大多数的人一样,感觉人工智能很神奇.当时就整晚整晚的想人工智能会取代人类呀 ...

  10. Storyboards Tutorial 02

    内容中包含 base64string 图片造成字符过多,拒绝显示