insertAdjacentHTML方法示例
添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。
insertAdjacentHTML方法：在指定的地方插入html标签语句
原型：insertAdajcentHTML(swhere,stext)
参数：
swhere: 指定插入html标签语句的地方，有四种值可用：
1. beforeBegin: 插入到标签开始前
2. afterBegin:插入到标签开始标记之后
3. beforeEnd:插入到标签结束标记前
4. afterEnd:插入到标签结束标记后
stext：要插入的内容
1 <html>
2 <head>
3 <script language="javascript">
4 function myfun(){
5 var obj = document.getElementById("btn1");
6 obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">");
7 }
8 </script>
9 </head>
10 <body>
11 <input name="txt">
12 <input id="btn1" name="btn1" type="button" value="更多" onclick="myfun()">
13 </body>
14 </html>
************************************************************************************
1 <html>
2 <head>
3 <title>24.htm insertAdjacentHTML插入新内容</title>
4 <script language="jscript">
5 function addsome()
6 {
7 document.all.paral.insertAdjacentHTML("afterBegin","<h1>在文本前容器内插入内容</h1>");
8 document.all.paral.insertAdjacentHTML("beforeEnd","<h2>在文本后容器内插入内容</h2>");
9 document.all.paral.insertAdjacentHTML("beforeBegin","<h4>在文本前容器外插入内容</h1>");
10 document.all.paral.insertAdjacentHTML("afterEnd","<h5>在文本后容器外插入内容</h2>");
11 }
12 </script>
13 </head>
14 <body onload="addsome()">
15 <div id="paral" style="fontsize:6;color='#ff00ff'">原来的内容</div><hr>
16 </body>
17 </html>
**********************************************************************************
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3 <HEAD>
4 <TITLE> New Document </TITLE>
5 <META NAME="Generator" CONTENT="EditPlus">
6 <META NAME="Author" CONTENT="">
7 <META NAME="Keywords" CONTENT="">
8 <META NAME="Description" CONTENT="">
9 </HEAD>
10 <BODY>
11 <script>
12 var num=0;
13 var No_sys=0;
14 function Add_button(){
15 if(No_sys<8){
16 c_input.insertAdjacentHTML("beforeEnd","<div id="bar"+num+"" oncontextmenu="Remove_button(bar"+num+");return false" style="background:red;width:40;height:20">"+num+"</div>");
17 num++;
18 No_sys++;
19 }
20 }
21 function Remove_button(obj){
22 obj.removeNode(true);
23 No_sys--;
24 }
25 </script>
26 <input type="button" onclick="Add_button()" value="动态加">
27 <input type="button" onclick="alert(c_input.innerHTML)" value="看">
28 <div id="c_input">
29 </div>
30 </BODY>
31 </HTML>
分享到：
相关推荐
一般情况下，我们都是用appendChild的方式，一行行、一...该功能的实现意义重大，这样页面元素的处理，就全部都能够用拼html字串的方法来实现了。 1 插入行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
innerText 属性在 IE 浏览器...如果需要使用这些非标准的方法，或者已有的代码大量使用了这些方法的话，就必须为其他浏览器提供对应的 prototype 定义。比如： var isMinNS5 = (navigator.appName.indexOf("Net
在不使用预定义转义功能的情况下，我们将不允许分配（例如，对innerHTML）和调用（例如，对insertAdjacentHTML）。 转义函数必须使用模板字符串来调用。 函数名称被硬编码为Sanitizer.escapeHTML和escapeHTML 。 ...
使用方便的、对压缩器友好的方法。 安装 npm install dom-insert-html 应用程序接口 可用方法： after(element, string) : 在元素之后插入 HTML 字符串。 before(element, string) : 在元素之前插入 HTML 字符串...
主要介绍了js简单实现表单中点击按钮动态增加输入框数量的方法,涉及javascript鼠标点击事件及insertAdjacentHTML方法的相关使用技巧,需要的朋友可以参考下
用法 非常简单。 svgLocalstorage ( 'sprite.svg' , '1.0.0' ) . then ( svg => { document . body . insertAdjacentHTML ( 'afterbegin' , svg ) ; } ) . catch ( err => { console . log ( err ) ; } ) ;...
使用insertAdjacentHTML以高效的方式将给定的字符串添加到DOM并返回新创建HTML元素。 在测试套件中对设置要声明HTML有用。安装npm install --save string-to-dom用法var stringToDom = require ( 'string-to-dom' )...
在脚本中要用到两个函数：insertAdjacentHTML和removeChild，而恰好这两个函数在Firefox下都不能正常使用。几乎花费了一天的时候，在网上搜索着解决的方法，还好被找到了，也让我大松一口气。 具体两个函数是这样的...
4．打印页面的特定部分我是通过将需要打印的特定部分另建一个页面，然后装入主页面的一个IFrame中，再调用IFrame的打印方法，只打印IFrame中的内容实现的。如：...
Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type ... 捕获释放 event.srcElement.setCapture();...event.srcElement.releaseCapture();... 根据鼠标获得元素： document....