添加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>
分享到:
相关推荐
insertAdjacentHTML动态插入行[归类].pdf
类似的像 insertAdjacentElement , insertAdjacentElement , insertAdjacentHTML , insertAdjacentText 等。如果需要使用这些非标准的方法,或者已有的代码大量使用了这些方法的话,就必须为其他浏览器提供...
一般情况下,我们都是用appendChild的方式,一行行、一...该功能的实现意义重大,这样页面元素的处理,就全部都能够用拼html字串的方法来实现了。 1 插入行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
在table中插入多行,能使用与insertAdjacentHTML相似的功能
禁止未经消毒的代码(无未经消毒的) 这些规则禁止可能导致安全漏洞的不安全编码实践。 在不使用预定义转义功能的情况下,我们将...以下是一些我们不希望的代码示例: foo . innerHTML = input . value ; bar . inne
使用方便的、对压缩器友好的方法。 安装 npm install dom-insert-html 应用程序接口 可用方法: after(element, string) : 在元素之后插入 HTML 字符串。 before(element, string) : 在元素之前插入 HTML 字符串...
dhtml提供了两个方法来进行添加,insertAdjacentHTML和insertAdjacentText insertAdjacentHTML方法:在指定的地方插入html标签语句。 原型:insertAdjacentHTML(swhere,stext) 参数: swhere:指定插入html标签语句的...
主要介绍了js简单实现表单中点击按钮动态增加输入框数量的方法,涉及javascript鼠标点击事件及insertAdjacentHTML方法的相关使用技巧,需要的朋友可以参考下
我会抽空把IE专有的方法如:insertAdjacentHTML的速度也给测出来看看是否合适大量数据时IE下,不用innerHTML的速度。这里的主要测试不是指生成数据时的速度,指的是匹配速度 ,例如我这里的匹配速度我测的10000条...
:rocket: #100DaysOfCode... insertAdjacentHTML() setTimeout() 窗口setInterval()方法 Math.floor() 本地存储 join()方法 Math.random() 交叉口观察器JavaScript API Python 介绍 Git和GitHub
在脚本中要用到两个函数:insertAdjacentHTML和removeChild,而恰好这两个函数在Firefox下都不能正常使用。几乎花费了一天的时候,在网上搜索着解决的方法,还好被找到了,也让我大松一口气。 具体两个函数是这样的...
Mozilla中独有的读写器(defineGetter、defineSetter)以及可以给Element,Event等加上prototype原型,使得在IE里用的方法同样在Mozilla中可以适用,下面贴出常用的一些代码 例如 obj.insertAdjacentHTML, ...
SVG本地存储 用于在localstorage缓存SVG sprite的... 此方法返回一个Promise 文件 必填类型: string 您希望缓存的文件路径。 修订 必填类型: string 加载文件之前,请检查版本是否存在。 开发人员 npm i
interface HTMLElement : ... void insertAdjacentHTML(in DOMString position, in DOMString text); // metadata attributes attribute DOMString id; attribute DOMString title; attribute DOMString lang;
4.打印页面的特定部分我是通过将需要打印的特定部分另建一个页面,然后装入主页面的一个IFrame中,再调用IFrame的打印方法,只打印IFrame中的内容实现的。如:...
基于原始来源,如果您想创建自己的样式,则可以修改css\content.css ,然后使用一些CSS压缩器对其进行压缩,然后将其全部复制到js\content.js jfStyleEl.insertAdjacentHTML调用中js\content.js
到页面,或者使用JavaScript在需要的时候临时添加也可以: 代码如下: document.body.insertAdjacentHTML(“beforeEnd”, “<object id=\”WebBrowser\” width=0 height=0 \ classid=\”clsid:88
使用insertAdjacentHTML以高效的方式将给定的字符串添加到DOM并返回新创建HTML元素。 在测试套件中对设置要声明HTML有用。安装npm install --save string-to-dom用法var stringToDom = require ( 'string-to-dom' )...