<!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="">
<script type="text/javascript">
<!--
function insertHtml(where, el, html){
where = where.toLowerCase();
if(el.insertAdjacentHTML){
switch(where){
case "beforebegin":
el.insertAdjacentHTML('BeforeBegin', html);
return el.previousSibling;
case "afterbegin":
el.insertAdjacentHTML('AfterBegin', html);
return el.firstChild;
case "beforeend":
el.insertAdjacentHTML('BeforeEnd', html);
return el.lastChild;
case "afterend":
el.insertAdjacentHTML('AfterEnd', html);
return el.nextSibling;
}
throw 'Illegal insertion point -> "' + where + '"';
} else {
var range = el.ownerDocument.createRange();
var frag;
switch(where){
case "beforebegin":
range.setStartBefore(el);
frag = range.createContextualFragment(html);
el.parentNode.insertBefore(frag, el);
return el.previousSibling;
case "afterbegin":
if(el.firstChild){
range.setStartBefore(el.firstChild);
frag = range.createContextualFragment(html);
el.insertBefore(frag, el.firstChild);
return el.firstChild;
}else{
el.innerHTML = html;
return el.firstChild;
}
case "beforeend":
if(el.lastChild){
range.setStartAfter(el.lastChild);
frag = range.createContextualFragment(html);
el.appendChild(frag);
return el.lastChild;
}else{
el.innerHTML = html;
return el.lastChild;
}
case "afterend":
range.setStartAfter(el);
frag = range.createContextualFragment(html);
el.parentNode.insertBefore(frag, el.nextSibling);
return el.nextSibling;
}
throw 'Illegal insertion point -> "' + where + '"';
}
}
-->
</script>
</HEAD>
<BODY>
<div id="aa" >click the button to insertAdjacentHTML<br/></div>
<input type="button" value='add' onclick="add();" />
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
var index = 0;
function add() {
insertHtml("afterBegin",document.getElementById("aa"),"<input type='text' value=" + index++ + " /><br/>");
insertHtml("beforeEnd",document.getElementById("aa"),"<input type='text' value=" + index++ + " /><br/>");
}
//-->
</SCRIPT>
分享到:
相关推荐
insertAdjacentHTML动态插入行[归类].pdf
类似的像 insertAdjacentElement , insertAdjacentElement , insertAdjacentHTML , insertAdjacentText 等。如果需要使用这些非标准的方法,或者已有的代码大量使用了这些方法的话,就必须为其他浏览器提供...
下面的例子实现了这个功能,同样地,该例支持IE和firefox。该功能的实现意义重大,这样页面元素的处理,就全部都能够用拼html字串的方法来实现了。 1 插入行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能...
在table中插入多行,能使用与insertAdjacentHTML相似的功能
最近发现各大类库都能利用xxx[removed]=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势。
使用方便的、对压缩器友好的方法。 安装 npm install dom-insert-html 应用程序接口 可用方法: after(element, string) : 在元素之后插入 HTML 字符串。 before(element, string) : 在元素之前插入 HTML 字符串...
在不使用预定义转义功能的情况下,我们将不允许分配(例如,对innerHTML)和调用(例如,对insertAdjacentHTML)。 转义函数必须使用模板字符串来调用。 函数名称被硬编码为Sanitizer.escapeHTML和escapeHTML 。 ...
dhtml提供了两个方法来进行添加,insertAdjacentHTML和insertAdjacentText insertAdjacentHTML方法:在指定的地方插入html标签语句。 原型:insertAdjacentHTML(swhere,stext) 参数: swhere:指定插入html标签语句的...
我会抽空把IE专有的方法如:insertAdjacentHTML的速度也给测出来看看是否合适大量数据时IE下,不用innerHTML的速度。这里的主要测试不是指生成数据时的速度,指的是匹配速度 ,例如我这里的匹配速度我测的10000条...
主要介绍了js简单实现表单中点击按钮动态增加输入框数量的方法,涉及javascript鼠标点击事件及insertAdjacentHTML方法的相关使用技巧,需要的朋友可以参考下
Mozilla中独有的读写器(defineGetter、defineSetter)以及可以给Element,Event等加上prototype原型,使得在IE里用的方法同样在Mozilla中可以适用,下面贴出常用的一些代码 例如 obj.insertAdjacentHTML, ...
从理论上看,实现起来比较容易,但实际工作的时候还是遇到两个难点,这些难点归结起来都是一个原因造成的,那就是浏览器的兼容性。在脚本中要用到两个函数:insertAdjacentHTML和removeChild,而恰好这两个函数在...
这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势。首先innerHTML会把里面的某些位置的空白去掉,见下面运行框的结果: 代码如下:<!doctype html><html dir=”ltr” lang=”zh-CN...
:rocket: #100DaysOfCode... insertAdjacentHTML() setTimeout() 窗口setInterval()方法 Math.floor() 本地存储 join()方法 Math.random() 交叉口观察器JavaScript API Python 介绍 Git和GitHub
无关闭按钮IE window.open("aa.htm", "meizz", "fullscreen=7"); 统一编码/解码 alert(decodeURIComponent(encodeURIComponent("http://你好.com?as= hehe"))) encodeURIComponent对":"、"/"、";" 和 "?"也编码 ...
我主要使用了IE内置的WebBrowser控件,无需用户下载和安装。WebBrowser有很多功能,除打印外的其他功能就不再赘述了,你所能用到的打印功能也几乎全部可以靠它完成,下面的问题就是如何使用它了。先说显示后打印,...
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;