添加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>
<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`在不同位置插入内容的效果: ```html ;color:'#ff00ff'">原来的内容 function addsome() { document.all.paral.insertAdjacentHTML("afterBegin", "在文本前容器内插入...
但是,`insertAdjacentHTML`方法并不直接适用于表格元素中添加行(tr元素)。 在表格中插入多行的常规方法之一是使用`appendChild`或者`insertBefore`方法,这两种方法可以用来将新的`<tr>`元素添加到表格的`...
类似的像 insertAdjacentElement , insertAdjacentElement , insertAdjacentHTML , insertAdjacentText 等。如果需要使用这些非标准的方法,或者已有的代码大量使用了这些方法的话,就必须为其他浏览器提供...
一般情况下,我们都是用appendChild的方式,一行行、一...该功能的实现意义重大,这样页面元素的处理,就全部都能够用拼html字串的方法来实现了。 1 插入行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
在示例代码中,我们可以看到,每次点击按钮时,都会执行一个匿名函数,该函数中使用了insertAdjacentHTML方法在页面的body元素末尾添加一个新的文本输入框,并且每次都会将变量i的值作为输入框的name属性和初始值。...
禁止未经消毒的代码(无未经消毒的) 这些规则禁止可能导致安全漏洞的不安全编码实践。 在不使用预定义转义功能的情况下,我们将...以下是一些我们不希望的代码示例: foo . innerHTML = input . value ; bar . inne
客户端JavaScript接收到这些数据后,可以使用DOM操作(比如innerHTML或insertAdjacentHTML)将建议列表插入到页面的特定位置,如搜索框下方的下拉列表中。 为了优化用户体验,还可以加入一些额外的改进,比如添加...
使用方便的、对压缩器友好的方法。 安装 npm install dom-insert-html 应用程序接口 可用方法: after(element, string) : 在元素之后插入 HTML 字符串。 before(element, string) : 在元素之前插入 HTML 字符串...
使用`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....
- 生成的HTML字符串(`str`)最后应插入到页面的某个元素中,例如使用`innerHTML`属性或者`insertAdjacentHTML`方法。 8. **事件处理**: - 可能还需要添加额外的事件监听器,如点击日历中的日期进行选中或其他...
这个过程中,事件监听(如`addEventListener`)和DOM操作(如`innerHTML`或`insertAdjacentHTML`)是关键。 此外,你可能会使用到一些JavaScript库,如jQuery UI的日期选择器或Moment.js,它们提供了更强大、更易用...
然而,在一些旧版本的IE浏览器中,`innerHTML`属性和`insertAdjacentHTML`方法并不被支持。在这些环境中,开发者需要借助其他手段来实现类似的功能。例如,在旧版IE中,`innerHTML`属性对于某些HTML元素(如`col`、`...
3. **插入内容**:当获取到光标位置后,插件会使用JavaScript的`insertAdjacentHTML`方法或者通过创建`range`对象来在指定位置插入新内容。在jQuery中,这可能涉及到`beforeBegin`、`afterEnd`等定位参数。 4. **...
### 动态添加和删除上传图片的方法 在Web开发中,常常会遇到用户需要上传多个文件的情况,尤其是在图片上传功能的设计上。为了提供更好的用户体验,动态添加和删除上传控件的功能变得尤为重要。本文将详细介绍如何...
本示例介绍了一种利用JavaScript(JS)对象来实现自定义弹出层的方法。我们将深入探讨这个例子中的主要知识点。 1. **自定义JS对象**: 在这个例子中,`cmsgbox`是一个自定义的JavaScript对象,它包含了弹出层的...