添加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`在不同位置插入内容的效果： ```html ;color:'#ff00ff'">原来的内容 function addsome() { document.all.paral.insertAdjacentHTML("afterBegin", "在文本前容器内插入...
但是，`insertAdjacentHTML`方法并不直接适用于表格元素中添加行（tr元素）。 在表格中插入多行的常规方法之一是使用`appendChild`或者`insertBefore`方法，这两种方法可以用来将新的`<tr>`元素添加到表格的`...
本文将深入探讨`innerText`、`insertAdjacentElement`、`insertAdjacentHTML`、`insertAdjacentText`等几个JavaScript DOM操作方法的区别与应用。由于这些方法并非所有浏览器都支持，因此文中还提供了针对不同浏览器...
在示例代码中，我们可以看到，每次点击按钮时，都会执行一个匿名函数，该函数中使用了insertAdjacentHTML方法在页面的body元素末尾添加一个新的文本输入框，并且每次都会将变量i的值作为输入框的name属性和初始值。...
客户端JavaScript接收到这些数据后，可以使用DOM操作（比如innerHTML或insertAdjacentHTML）将建议列表插入到页面的特定位置，如搜索框下方的下拉列表中。 为了优化用户体验，还可以加入一些额外的改进，比如添加...
禁止未经消毒的代码（无未经消毒的） 这些规则禁止可能导致安全漏洞的不安全编码实践。 在不使用预定义转义功能的情况下，我们将...以下是一些我们不希望的代码示例： foo . innerHTML = input . value ; bar . inne
使用`insertAdjacentHTML()`或`insertAdjacentText()`方法，可以在DOM元素的前后插入内容。 **示例代码：** ```javascript document.body.insertAdjacentHTML("BeforeBegin", "要在元素前插入的内容"); document....
例如，`table.cells`仅在IE和Opera中可用，`innerText`和`insertAdjacentHTML`在大部分非Firefox浏览器中支持，`window.external.AddFavorite`用于在IE下添加到收藏夹，而`window.sidebar.addPanel`则适用于Firefox...
这通常通过`document.createElement()`，`innerHTML`，或者更现代的`insertAdjacentHTML()`等方法实现。 2. **事件监听**：用户点击页码按钮时，需要触发相应的事件处理函数，这通常通过`addEventListener()`来实现...
之后，将新创建的元素通过`appendChild`方法添加到指定父元素中，或者使用`insertBefore`、`insertAdjacentHTML`等方法将其插入到特定位置。 读取（Read）操作对应于从文档中检索信息。常用的DOM API包括`document....
这个过程中，事件监听（如`addEventListener`）和DOM操作（如`innerHTML`或`insertAdjacentHTML`）是关键。 此外，你可能会使用到一些JavaScript库，如jQuery UI的日期选择器或Moment.js，它们提供了更强大、更易用...
- 生成的HTML字符串（`str`）最后应插入到页面的某个元素中，例如使用`innerHTML`属性或者`insertAdjacentHTML`方法。 8. **事件处理**： - 可能还需要添加额外的事件监听器，如点击日历中的日期进行选中或其他...
3. **插入内容**：当获取到光标位置后，插件会使用JavaScript的`insertAdjacentHTML`方法或者通过创建`range`对象来在指定位置插入新内容。在jQuery中，这可能涉及到`beforeBegin`、`afterEnd`等定位参数。 4. **...
本示例介绍了一种利用JavaScript（JS）对象来实现自定义弹出层的方法。我们将深入探讨这个例子中的主要知识点。 1. **自定义JS对象**： 在这个例子中，`cmsgbox`是一个自定义的JavaScript对象，它包含了弹出层的...
- `insertAdjacentHTML`：在元素前后插入HTML字符串，此处用于动态创建`<input type="file">`元素。 - `removeChild`：移除指定的子节点，用于删除已选择的附件。 3. **变量管理**： - `i` 作为计数器，用于生成...
在实例代码中，通过`document.getElementById`方法获取元素，通过`insertAdjacentHTML`方法将新创建的积木插入到页面中。 2. 鼠标事件：积木的拖动涉及到三个鼠标事件：mousedown、mousemove和mouseup。mousedown...
4. **DOM操作**：使用DOM（文档对象模型）方法，如`innerHTML`或`insertAdjacentHTML`等，将搜索建议插入到页面的相应位置，更新用户界面。 5. **延迟加载与节流**：为了优化性能，避免频繁请求，可能会采用延迟...
4. 动态更新选项：使用`innerHTML`或`insertAdjacentHTML`方法来改变下拉菜单的HTML内容，添加新的选项。 5. 考虑性能优化：为了提高用户体验，可以预先加载部分数据，或者使用懒加载策略，只在用户实际需要时才...
7. **优化与性能**：对于大数据量的动态添加，考虑使用`insertAdjacentHTML()`方法，它可以直接将HTML字符串插入到指定位置，避免了频繁的DOM操作。此外，使用`createDocumentFragment()`可以减少DOM重绘，提高性能...