JS insertAdjacentHTML

最新推荐文章于 2025-04-26 22:08:37 发布

wzwd111

最新推荐文章于 2025-04-26 22:08:37 发布

阅读量136

点赞数

分类专栏： JS 文章标签： HTML JavaScript .net ViewUI

JS 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了如何使用insertAdjacentHTML方法来在DOM中指定位置插入HTML内容。通过示例代码展示了该方法的四个插入位置选项，并提供了一个实际的例子，即在一个按钮元素后添加一个新的输入框。

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

http://www.blogjava.net/Scott/archive/2007/08/30/141449.html

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>