添加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编写...