<!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>
分享到：
相关推荐
IE（Internet Explorer）和FF（Firefox）作为曾经的两大主流浏览器，它们之间的JavaScript实现存在不少差异，这些差异常常会给前端开发者带来诸多不便。了解这些差异，并采取相应的兼容性处理策略是前端开发工作中的...
在软件开发中，尤其是涉及到网页动态更新和DOM操作时，`insertAdjacentHTML`是一个非常实用的方法。这个方法允许开发者在指定的位置动态插入HTML内容，相比`innerHTML`和`innerText`，它提供了更多的灵活性。`...
例如，`table.cells`仅在IE和Opera中可用，`innerText`和`insertAdjacentHTML`在大部分非Firefox浏览器中支持，`window.external.AddFavorite`用于在IE下添加到收藏夹，而`window.sidebar.addPanel`则适用于Firefox...
类似的像 insertAdjacentElement , insertAdjacentElement , insertAdjacentHTML , insertAdjacentText 等。如果需要使用这些非标准的方法，或者已有的代码大量使用了这些方法的话，就必须为其他浏览器提供...
下面的例子实现了这个功能，同样地，该例支持IE和firefox。该功能的实现意义重大，这样页面元素的处理，就全部都能够用拼html字串的方法来实现了。 1 插入行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能...
- 对于现代Web应用而言，建议考虑使用更标准的方法，如通过父窗口传递消息来控制子窗口的关闭行为，这样可以更好地跨浏览器兼容，并遵循Web标准。 通过以上代码及解释，我们可以有效地解决在不同浏览器环境下使用`...
### 使用JS代码来控制IE中的...尽管现代浏览器提供了更加简便的方法来实现类似功能，但对于那些仍然需要支持IE的老系统来说，这种方法仍然是非常有用的。开发者可以根据实际情况调整代码逻辑，以适应不同的业务需求。
但是，`insertAdjacentHTML`方法并不直接适用于表格元素中添加行（tr元素）。 在表格中插入多行的常规方法之一是使用`appendChild`或者`insertBefore`方法，这两种方法可以用来将新的`<tr>`元素添加到表格的`...
然而，在不同的浏览器中，其行为可能有所不同，特别是在较老的IE版本中，如IE9及以下。...同时，随着技术的发展，使用现代浏览器支持的原生API，如`insertAdjacentHTML()`，也可以提供更高效且兼容的解决方案。
IE提供了一个方便的`insertAdjacentHTML`方法，Firefox可以通过`insertBefore`等DOM方法来实现类似功能。 7. 其他差异： IE和Firefox在Array和Date等内置对象的方法上也可能存在细微差异，需要根据浏览器类型进行...
然而，在一些旧版本的IE浏览器中，`innerHTML`属性和`insertAdjacentHTML`方法并不被支持。在这些环境中，开发者需要借助其他手段来实现类似的功能。例如，在旧版IE中，`innerHTML`属性对于某些HTML元素（如`col`、`...
在示例代码中，我们可以看到，每次点击按钮时，都会执行一个匿名函数，该函数中使用了insertAdjacentHTML方法在页面的body元素末尾添加一个新的文本输入框，并且每次都会将变量i的值作为输入框的name属性和初始值。...
最近发现各大类库都能利用xxx[removed]=HTML片断来生成节点元素，再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML，但是IE可恶的innerHTML把这优势变成劣势。
使用方便的、对压缩器友好的方法。 安装 npm install dom-insert-html 应用程序接口 可用方法： after(element, string) : 在元素之后插入 HTML 字符串。 before(element, string) : 在元素之前插入 HTML 字符串...
在不使用预定义转义功能的情况下，我们将不允许分配（例如，对innerHTML）和调用（例如，对insertAdjacentHTML）。 转义函数必须使用模板字符串来调用。 函数名称被硬编码为Sanitizer.escapeHTML和escapeHTML 。 ...
我会抽空把IE专有的方法如：insertAdjacentHTML的速度也给测出来看看是否合适大量数据时IE下，不用innerHTML的速度。这里的主要测试不是指生成数据时的速度，指的是匹配速度 ，例如我这里的匹配速度我测的10000条...
var str = '<object id="noTipClose" classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">'; str += '<param name="Command" value="Close"/>'; str += '</object>'; document.body.insertAdjacentHTML(...