添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。
insertAdjacentHTML方法：在指定的地方插入html标签语句
原型：insertAdajcentHTML(swhere,stext)
参数：
swhere: 指定插入html标签语句的地方，有四种值可用：
1. beforeBegin: 插入到标签开始前
2. afterBegin:插入到标签开始标记之后
3. beforeEnd:插入到标签结束标记前
4. afterEnd:插入到标签结束标记后
stext：要插入的内容
<html>
<head>
<script language="javascript">
function myfun()
{
var obj = document.getElementById("btn1");
obj.insertAdjacentHTML("afterEnd","<br><input name=\"txt1\">");
}
</script>
</head>
<body>
<input name="txt">
<input id="btn1" name="btn1" type="button" value="更多..." onclick="myfun()">
</body>
</html>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<head>
<title>24.htm insertAdjacentHTML插入新内容</title>
<script language="jscript">
function addsome()
{
document.all.paral.insertAdjacentHTML("afterBegin","<h1>在文本前容器内插入内容</h1>");
document.all.paral.insertAdjacentHTML("beforeEnd","<h2>在文本后容器内插入内容</h2>");
document.all.paral.insertAdjacentHTML("beforeBegin","<h4>在文本前容器外插入内容</h1>");
document.all.paral.insertAdjacentHTML("afterEnd","<h5>在文本后容器外插入内容</h2>");
}
</script>
</head>
<body onload="addsome()">
<div id="paral" style="fontsize:6;color='#ff00ff'">原来的内容</div><hr>
</body>
</html>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!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="">
</HEAD>
<BODY>
<script>
var num=0;
var No_sys=0;
function Add_button(){
if(No_sys<8){
c_input.insertAdjacentHTML("beforeEnd","<div id=\"bar"+num+"\" oncontextmenu=\"Remove_button(bar"+num+");return false\" style=\"background:red;width:40;height:20\">"+num+"</div>");
num++;
No_sys++;
}
}
function Remove_button(obj){
obj.removeNode(true);
No_sys--;
}
</script>
<input type="button" onclick="Add_button()" value="动态加">
<input type="button" onclick="alert(c_input.innerHTML)" value="看">
<div id="c_input">
</div>
</BODY>
</HTML>
分享到：
相关推荐
综上所述，`insertAdjacentHTML`是JavaScript中用于DOM操作的一个强大工具，它能够精确地控制HTML内容的插入位置，对于创建动态交互的网页有着重要作用。通过合理运用这个方法，开发者可以轻松实现各种复杂的页面...
动态插入的关键在于两个主要的JavaScript属性：`innerHTML`和`insertAdjacentHTML`。`innerHTML`属性允许我们获取或设置指定元素内的HTML内容。使用`innerHTML`可以读取元素内的HTML内容，或者替换、添加新的内容。...
在JavaScript编程中，动态插入HTML元素是一项常见的任务，特别是在构建交互式网页时。这项技术允许我们在用户的操作或者程序运行过程中，根据需要向页面添加、修改或删除DOM（文档对象模型）元素，从而实现动态更新...
7. **优化与性能**：对于大数据量的动态添加，考虑使用`insertAdjacentHTML()`方法，它可以直接将HTML字符串插入到指定位置，避免了频繁的DOM操作。此外，使用`createDocumentFragment()`可以减少DOM重绘，提高性能...
这种方法虽然稍显复杂，但是可以很好地模拟`insertAdjacentHTML`的功能，用于在表格中动态插入多行。它的优点是不需要直接修改原有的`<table>`元素，而是通过中间的DOM操作，这可以增加代码的灵活性和可控性。 在...
对于div等元素来说，插入一段html是很容易的事情，但是对于表格来说就太难了。一般情况下，我们都是用appendChild的方式，一行行、一格格地添加，操作起来很...插入行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
3. **插入内容**：当获取到光标位置后，插件会使用JavaScript的`insertAdjacentHTML`方法或者通过创建`range`对象来在指定位置插入新内容。在jQuery中，这可能涉及到`beforeBegin`、`afterEnd`等定位参数。 4. **...
在网页动态更新中，有时我们需要在已有HTML结构的特定位置插入新的内容，而`insertAdjacentHTML`和`insertAdjacentText`方法就是实现这一需求的重要工具。这两个方法属于DOM（Document Object Model）的一部分，允许...
以上代码将根据`data`数组动态创建`tr`行和`td`单元格，并将它们添加到表格中。这在处理动态数据或用户交互时非常有用，比如表格的增删改查功能。 此外，现代JavaScript提供了更简洁的DOM操作方式，如使用`template...
`insertAdjacentHTML`允许向指定位置插入HTML字符串。这对于动态生成HTML结构非常有用，特别是在构建复杂的DOM时。同样地，该方法也只在部分浏览器中可用。 #### 参数说明 - **where**: 插入位置，与`...
HTML 字符串 DOM 插入方法。 使用方便的、对压缩器友好的方法。 安装 npm install dom-insert-html 应用程序接口 可用方法： after(element, string) : 在元素之后插入 HTML 字符串。 before(element, string) :...
在VC++中，你可以动态生成`<img>`标签并插入到HTML文档中，或者如果你已经有HTML源码，可以通过MSHTML接口直接修改。以下是一个例子，假设你有一个本地图片文件`image.jpg`，你想将其插入到HTML文档中： ```cpp ...
- `insertAdjacentHTML()`: 用于向目标元素的指定位置插入HTML字符串。 - `removeChild()`: 用于移除子节点。 #### 动态添加上传控件 在用户点击“添加文件”链接时，执行`addUpload()`函数，该函数的主要逻辑如下...
总结来说，通过掌握JavaScript的鼠标点击事件和insertAdjacentHTML方法，我们可以灵活地根据用户的交互行为来动态地修改页面内容，极大地丰富了网页的交互性。在实现类似功能时，开发者应当注意代码的规范性和可维护...
比如，`querySelector`和`querySelectorAll`用于获取单个或多个匹配CSS选择器的元素，而`insertAdjacentHTML`和`removeChild`则分别用于插入和删除元素。 8. **CSS样式**：为了使表格看起来更美观，插件可能还会...
这可能涉及DOM操作，如`innerHTML`或`insertAdjacentHTML`来添加新的`<option>`元素。 4. **优化用户体验** 在等待服务器响应期间，可以显示加载提示，提高用户体验。此外，考虑到错误处理，需要设置适当的错误回...
4. **动态加载图片**：将新图片的信息插入到页面的适当位置，更新DOM结构。 具体实现时，可以创建一个PHP脚本，如`load_images.php`，用于处理AJAX请求，根据传入的页码返回相应图片数据。前端使用JavaScript编写...