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>
************************************************************************************
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`相似但只能插入纯文本的方法`insertAdjacentText`，它的用法与`insertAdjacentHTML`类似，只是插入的内容不会被解析为HTML。 最后，一个简单的动态添加和删除元素的例子： ``...
一般情况下，我们都是用appendChild的方式，一行行、一...该功能的实现意义重大，这样页面元素的处理，就全部都能够用拼html字串的方法来实现了。 1 插入行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
innerText 属性在 IE 浏览器...如果需要使用这些非标准的方法，或者已有的代码大量使用了这些方法的话，就必须为其他浏览器提供对应的 prototype 定义。比如： var isMinNS5 = (navigator.appName.indexOf("Net
在表格中插入多行的常规方法之一是使用`appendChild`或者`insertBefore`方法，这两种方法可以用来将新的`<tr>`元素添加到表格的`<tbody>`中。但是，要注意`<table>`元素的`rows`和`tBodies`属性。`rows`属性会返回...
在不使用预定义转义功能的情况下，我们将不允许分配（例如，对innerHTML）和调用（例如，对insertAdjacentHTML）。 转义函数必须使用模板字符串来调用。 函数名称被硬编码为Sanitizer.escapeHTML和escapeHTML 。 ...
使用方便的、对压缩器友好的方法。 安装 npm install dom-insert-html 应用程序接口 可用方法： after(element, string) : 在元素之后插入 HTML 字符串。 before(element, string) : 在元素之前插入 HTML 字符串...
然而，在一些旧版本的IE浏览器中，`innerHTML`属性和`insertAdjacentHTML`方法并不被支持。在这些环境中，开发者需要借助其他手段来实现类似的功能。例如，在旧版IE中，`innerHTML`属性对于某些HTML元素（如`col`、`...
举个例子，假设我们有一个`<div id="ScriptDiv"></div>`，我们可以使用`insertAdjacentHTML`方法向其内部添加按钮和脚本： ```javascript var sHTML = '() value=’Click Me’><BR>'; var sScript = '...
在示例代码中，我们可以看到，每次点击按钮时，都会执行一个匿名函数，该函数中使用了insertAdjacentHTML方法在页面的body元素末尾添加一个新的文本输入框，并且每次都会将变量i的值作为输入框的name属性和初始值。...
要深入学习和使用这个插件，你需要查看这个文件的内容，了解其具体的API和使用方法。如果你遇到任何问题，如解析错误、功能不正常等，可以参考jQuery的官方文档，或者搜索相关的技术论坛寻求帮助。同时，熟悉HTML5的...
或者使用更现代的方法，利用`createElement`和`appendChild`，或者使用`insertAdjacentHTML`方法： ```javascript var container = document.getElementById('container'); var newP = document.createElement('p')...
使用`insertAdjacentHTML()`或`insertAdjacentText()`方法，可以在DOM元素的前后插入内容。 **示例代码：** ```javascript document.body.insertAdjacentHTML("BeforeBegin", "要在元素前插入的内容"); document....
示例代码中，`_insert()`函数展示了如何在DOM操作中使用`insertAdjacentHTML()`、`insertAdjacentText()`和`insertAdjacentElement()`等原生JavaScript方法。`append()`、`prepend()`、`before()`和`after()`等...
3. **appendChild()**: 当你需要将新元素添加到现有元素的子节点末尾时，可以使用这个方法。例如，`parentElement.appendChild(newElement)`将`newElement`添加到`parentElement`的子节点列表末尾。 4. **...
此外，现代JavaScript提供了更简洁的DOM操作方式，如使用`template literals`（模板字符串）和`insertAdjacentHTML()`方法，或者利用`fragment`（文档碎片）提高性能。例如： ```javascript var fragment = ...
这个过程可以通过操作DOM（文档对象模型）来完成，例如，使用`innerHTML`属性或`insertAdjacentHTML`方法将建议插入到合适的HTML元素中。 6. **用户体验优化**：为了提供更好的用户体验，我们还可以添加一些额外的...
这可以通过操作DOM（文档对象模型）来实现，例如使用`innerHTML`属性或`insertAdjacentHTML`方法来插入新的HTML元素。 另外，为了提高用户体验，还可以添加一些额外的JavaScript功能，如延迟加载（debounce）以减少...
接下来，我们使用JavaScript来实现动态添加和删除文件上传控件的功能。这里主要用到了以下几个关键方法： - `getElementById()`: 用来获取页面中的某个元素。 - `insertAdjacentHTML()`: 用于向目标元素的指定位置...