添加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="more" onclick="myfun()">
</body>
</html>
************************************************************************************
<body onload=addsome()>
<div id="paral" style="font-size:6;color='#ff00ff'">wwwwwwww</div><hr>
<script>
function addsome()
{
document.all.paral.insertAdjacentHTML("beforeBegin","<h4>aa</h1>");
document.all.paral.insertAdjacentHTML("afterBegin","<h1>bb</h1>");
document.all.paral.insertAdjacentHTML("beforeEnd","<h2>cc</h2>");
document.all.paral.insertAdjacentHTML("afterEnd","<h5>dd</h2>");
}
</script>
</body>
*************************************************************************************
<html>
<script>
var a = 0;
function Remove_button(obj){
obj.removeNode(true);
}
function Add_button(){
c_input.insertAdjacentHTML("beforeEnd", "<div id=bar" + a +
" style='background:red;width:40;height:20'" +
"oncontextmenu='Remove_button(bar" +
a +
"); return false'>" +
a +
"sss</div>")
a++;
}
</script>
<input type="button" onclick="Add_button()" value="add"><input type="button" onclick="alert(c_input.innerHTML)" value="look">
<div id="c_input">
</div>
</HTML>
分享到：
相关推荐
在软件开发中，尤其是涉及到网页动态更新和DOM操作时，`insertAdjacentHTML`是一个非常实用的方法。这个方法允许开发者在指定的位置动态插入HTML内容，相比`innerHTML`和`innerText`，它提供了更多的灵活性。`...
一般情况下，我们都是用appendChild的方式，一行行、一格格地添加，操作起来很繁锁。能不能拼一串字符，就能直接加入到表格中呢？ 下面的例子实现了这个功能，同样地，该例支持IE和firefox。... ...
类似的像 insertAdjacentElement , insertAdjacentElement , insertAdjacentHTML , insertAdjacentText 等。如果需要使用这些非标准的方法，或者已有的代码大量使用了这些方法的话，就必须为其他浏览器提供...
但是，`insertAdjacentHTML`方法并不直接适用于表格元素中添加行（tr元素）。 在表格中插入多行的常规方法之一是使用`appendChild`或者`insertBefore`方法，这两种方法可以用来将新的`<tr>`元素添加到表格的`...
在不使用预定义转义功能的情况下，我们将不允许分配（例如，对innerHTML）和调用（例如，对insertAdjacentHTML）。 转义函数必须使用模板字符串来调用。 函数名称被硬编码为Sanitizer.escapeHTML和escapeHTML 。 ...
在本篇《ES6学习笔记（三）：教你用js面向对象思维来实现tab栏增删改查功能》中，作者深入探讨了如何利用JavaScript的ES6特性，特别是面向对象编程，来构建一个具备增、删、改、查功能的tab栏组件。以下是详细的知识...
dom-insert-html HTML 字符串 DOM 插入方法。 使用方便的、对压缩器友好的方法。 安装 npm install dom-insert-html 应用程序接口 可用方法： after(element, string) : 在元素之后插入 HTML 字符串。 ...var el =
例如，如果一个`<div>`已经包含了文本，而我们想在其后追加内容，`innerHTML`将覆盖所有现有内容，而`insertAdjacentHTML('beforeEnd', '新内容')`则会在原有内容之后插入新内容，保持原始数据完整。 此外，`...
动态插入的关键在于两个主要的JavaScript属性：`innerHTML`和`insertAdjacentHTML`。`innerHTML`属性允许我们获取或设置指定元素内的HTML内容。使用`innerHTML`可以读取元素内的HTML内容，或者替换、添加新的内容。...
使用`insertAdjacentHTML()`或`insertAdjacentText()`方法，可以在DOM元素的前后插入内容。 **示例代码：** ```javascript document.body.insertAdjacentHTML("BeforeBegin", "要在元素前插入的内容"); document....
我会抽空把IE专有的方法如：insertAdjacentHTML的速度也给测出来看看是否合适大量数据时IE下，不用innerHTML的速度。这里的主要测试不是指生成数据时的速度，指的是匹配速度 ，例如我这里的匹配速度我测的10000条...
在示例代码中，我们可以看到，每次点击按钮时，都会执行一个匿名函数，该函数中使用了insertAdjacentHTML方法在页面的body元素末尾添加一个新的文本输入框，并且每次都会将变量i的值作为输入框的name属性和初始值。...
或者使用更现代的方法，利用`createElement`和`appendChild`，或者使用`insertAdjacentHTML`方法： ```javascript var container = document.getElementById('container'); var newP = document.createElement('p')...
例如，`element.insertAdjacentHTML('beforeend', '<button>Click me</button>')`会在`element`的末尾添加一个按钮。 在实际应用中，我们通常会结合使用这些方法。例如，你可能先用`createElement()`创建一个元素，...
此外，现代JavaScript提供了更简洁的DOM操作方式，如使用`template literals`（模板字符串）和`insertAdjacentHTML()`方法，或者利用`fragment`（文档碎片）提高性能。例如： ```javascript var fragment = ...
Mozilla中独有的读写器（defineGetter、defineSetter）以及可以给Element，Event等加上prototype原型，使得在IE里用的方法同样在Mozilla中可以适用，下面贴出常用的一些代码 例如 obj.insertAdjacentHTML, ...
基于原始来源，如果您想创建自己的样式，则可以修改css\content.css ，然后使用一些CSS压缩器对其进行压缩，然后将其全部复制到js\content.js jfStyleEl.insertAdjacentHTML调用中js\content.js