`
jackeysion
  • 浏览: 129290 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

insertAdjacentHTML方法示例(转载)

阅读更多


添加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动态插入行[归类].pdf

    另一个示例展示了`insertAdjacentHTML`在不同位置插入内容的效果: ```html ;color:'#ff00ff'"&gt;原来的内容 function addsome() { document.all.paral.insertAdjacentHTML("afterBegin", "在文本前容器内插入...

    在table中插入多行的js代码(与insertAdjacentHTML相似的功能)

    但是,`insertAdjacentHTML`方法并不直接适用于表格元素中添加行(tr元素)。 在表格中插入多行的常规方法之一是使用`appendChild`或者`insertBefore`方法,这两种方法可以用来将新的`&lt;tr&gt;`元素添加到表格的`...

    innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别

    类似的像 insertAdjacentElement , insertAdjacentElement , insertAdjacentHTML , insertAdjacentText 等。如果需要使用这些非标准的方法,或者已有的代码大量使用了这些方法的话,就必须为其他浏览器提供...

    在table中插入多行,能使用与insertAdjacentHTML相似的功能吗?

    一般情况下,我们都是用appendChild的方式,一行行、一...该功能的实现意义重大,这样页面元素的处理,就全部都能够用拼html字串的方法来实现了。 1 插入行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    js简单实现表单中点击按钮动态增加输入框数量的方法

    在示例代码中,我们可以看到,每次点击按钮时,都会执行一个匿名函数,该函数中使用了insertAdjacentHTML方法在页面的body元素末尾添加一个新的文本输入框,并且每次都会将变量i的值作为输入框的name属性和初始值。...

    eslint-plugin-no-unsanitized:自定义ESLint规则可禁止不安全的innerHTML,outerHTML,insertAdjacentHTML等

    禁止未经消毒的代码(无未经消毒的) 这些规则禁止可能导致安全漏洞的不安全编码实践。 在不使用预定义转义功能的情况下,我们将...以下是一些我们不希望的代码示例: foo . innerHTML = input . value ; bar . inne

    这两天做了个类似Google suggest的搜索功能的Ajax代码,当然这段代码是在AJAX基础教程中示例4.9的基础上修改完成的.

    客户端JavaScript接收到这些数据后,可以使用DOM操作(比如innerHTML或insertAdjacentHTML)将建议列表插入到页面的特定位置,如搜索框下方的下拉列表中。 为了优化用户体验,还可以加入一些额外的改进,比如添加...

    dom-insert-html:使用“insertAdjacentHTML”的 HTML 字符串 DOM 插入方法

    使用方便的、对压缩器友好的方法。 安装 npm install dom-insert-html 应用程序接口 可用方法: after(element, string) : 在元素之后插入 HTML 字符串。 before(element, string) : 在元素之前插入 HTML 字符串...

    javaScript重要知识

    使用`insertAdjacentHTML()`或`insertAdjacentText()`方法,可以在DOM元素的前后插入内容。 **示例代码:** ```javascript document.body.insertAdjacentHTML("BeforeBegin", "要在元素前插入的内容"); document....

    IE浏览器检测的方法.docx

    例如,`table.cells`仅在IE和Opera中可用,`innerText`和`insertAdjacentHTML`在大部分非Firefox浏览器中支持,`window.external.AddFavorite`用于在IE下添加到收藏夹,而`window.sidebar.addPanel`则适用于Firefox...

    pagedna:pagedna 的代码示例

    这通常通过`document.createElement()`,`innerHTML`,或者更现代的`insertAdjacentHTML()`等方法实现。 2. **事件监听**:用户点击页码按钮时,需要触发相应的事件处理函数,这通常通过`addEventListener()`来实现...

    原生js实现针对Dom节点的CRUD操作示例

    之后,将新创建的元素通过`appendChild`方法添加到指定父元素中,或者使用`insertBefore`、`insertAdjacentHTML`等方法将其插入到特定位置。 读取(Read)操作对应于从文档中检索信息。常用的DOM API包括`document....

    js实现简单的日历显示效果函数示例

    - 生成的HTML字符串(`str`)最后应插入到页面的某个元素中,例如使用`innerHTML`属性或者`insertAdjacentHTML`方法。 8. **事件处理**: - 可能还需要添加额外的事件监听器,如点击日历中的日期进行选中或其他...

    JS 日期时间控件

    这个过程中,事件监听(如`addEventListener`)和DOM操作(如`innerHTML`或`insertAdjacentHTML`)是关键。 此外,你可能会使用到一些JavaScript库,如jQuery UI的日期选择器或Moment.js,它们提供了更强大、更易用...

    深入理解javascript动态插入技术

    然而,在一些旧版本的IE浏览器中,`innerHTML`属性和`insertAdjacentHTML`方法并不被支持。在这些环境中,开发者需要借助其他手段来实现类似的功能。例如,在旧版IE中,`innerHTML`属性对于某些HTML元素(如`col`、`...

    Jquery内容插入光标处插件

    3. **插入内容**:当获取到光标位置后,插件会使用JavaScript的`insertAdjacentHTML`方法或者通过创建`range`对象来在指定位置插入新内容。在jQuery中,这可能涉及到`beforeBegin`、`afterEnd`等定位参数。 4. **...

    动态添加和删除上传图片的方法

    ### 动态添加和删除上传图片的方法 在Web开发中,常常会遇到用户需要上传多个文件的情况,尤其是在图片上传功能的设计上。为了提供更好的用户体验,动态添加和删除上传控件的功能变得尤为重要。本文将详细介绍如何...

    利用js对象弹出一个层

    本示例介绍了一种利用JavaScript(JS)对象来实现自定义弹出层的方法。我们将深入探讨这个例子中的主要知识点。 1. **自定义JS对象**: 在这个例子中,`cmsgbox`是一个自定义的JavaScript对象,它包含了弹出层的...

Global site tag (gtag.js) - Google Analytics