insertAdjacentHTML方法示例

最新推荐文章于 2025-08-17 10:00:00 发布

weixin_33991727

最新推荐文章于 2025-08-17 10:00:00 发布

阅读量116

点赞数

文章标签：开发工具 javascript ViewUI

本文详细介绍了HTML中用于插入内容的方法，包括innerHTML、innerText、insertAdjacentHTML和insertAdjacentText的区别与使用场景，并通过实例展示了如何灵活应用这些方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。
insertAdjacentHTML方法：在指定的地方插入html标签语句

原型：insertAdajcentHTML(swhere,stext)

参数：

swhere: 指定插入html标签语句的地方，有四种值可用：

1. beforeBegin: 插入到标签开始前

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

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

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

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>

<div id="one">one</div> 

<script type="text/javascript">
　　var d1 = document.getElementById('one'); 
　　d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
</script>
</body>
</html>

https://developer.mozilla.org/en-US/docs/Web/API/element.insertAdjacentHTML

火狐8.0以下不支持该方法，咱们可以用一个函数去实现：

if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement)
{
     HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode)
     {
        switch (where)
        {
            case 'beforeBegin':
                this.parentNode.insertBefore(parsedNode,this)
                break;
            case 'afterBegin':
                this.insertBefore(parsedNode,this.firstChild);
                break;
            case 'beforeEnd':
                this.appendChild(parsedNode);
                break;
            case 'afterEnd':
                if (this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling);
                    else this.parentNode.appendChild(parsedNode);
                break;
         }
     }
     HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr)
     {
         var r = this.ownerDocument.createRange();
         r.setStartBefore(this);
         var parsedHTML = r.createContextualFragment(htmlStr);
         this.insertAdjacentElement(where,parsedHTML)
     }
     HTMLElement.prototype.insertAdjacentText = function (where,txtStr)
     {
         var parsedText = document.createTextNode(txtStr)
         this.insertAdjacentElement(where,parsedText)
     }
}