添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。 insertAdjacentHTML方法：在指定的地方插入html标签语句

原型：insertAdajcentHTML(swhere,stext)

参数：

swhere: 指定插入html标签语句的地方，有四种值可用：

1.     beforeBegin: 插入到标签开始前

2.     afterBegin:插入到标签开始标记之后

3.     beforeEnd:插入到标签结束标记前

4.     afterEnd:插入到标签结束标记后

stext：要插入的内容

 1 <html>  2     <head>  3     <script language="javascript">  4     function myfun(){  5         var obj = document.getElementById("btn1");  6         obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">");  7     }  8     </script>  9     </head> 10     <body> 11         <input name="txt"> 12         <input id="btn1" name="btn1" type="button" value="更多" onclick="myfun()"> 13     </body> 14 </html>

************************************************************************************

 1 <html>  2 <head>  3 <title>24.htm insertAdjacentHTML插入新内容</title>  4 <script language="jscript">  5 function addsome()  6 {  7     document.all.paral.insertAdjacentHTML("afterBegin","<h1>在文本前容器内插入内容</h1>");  8     document.all.paral.insertAdjacentHTML("beforeEnd","<h2>在文本后容器内插入内容</h2>");  9     document.all.paral.insertAdjacentHTML("beforeBegin","<h4>在文本前容器外插入内容</h1>"); 10     document.all.paral.insertAdjacentHTML("afterEnd","<h5>在文本后容器外插入内容</h2>"); 11 } 12 </script> 13 </head> 14 <body onload="addsome()"> 15 <div id="paral" style="fontsize:6;color='#ff00ff'">原来的内容</div><hr> 16 </body> 17 </html> 

**********************************************************************************

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  2 <HTML>  3 <HEAD>  4 <TITLE> New Document </TITLE>  5 <META NAME="Generator" CONTENT="EditPlus">  6 <META NAME="Author" CONTENT="">  7 <META NAME="Keywords" CONTENT="">  8 <META NAME="Description" CONTENT="">  9 </HEAD> 10 <BODY> 11 <script> 12 var num=0; 13 var No_sys=0; 14 function Add_button(){ 15 if(No_sys<8){ 16     c_input.insertAdjacentHTML("beforeEnd","<div id="bar"+num+"" oncontextmenu="Remove_button(bar"+num+");return    false" style="background:red;width:40;height:20">"+num+"</div>"); 17     num++; 18     No_sys++; 19 } 20 } 21 function Remove_button(obj){ 22 obj.removeNode(true); 23 No_sys--; 24 } 25 </script> 26 <input type="button" onclick="Add_button()" value="动态加"> 27 <input type="button" onclick="alert(c_input.innerHTML)" value="看"> 28 <div id="c_input"> 29 </div>   30 </BODY> 31 </HTML>

insertAdjacentHTML方法示例的更多相关文章

  1. innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法

    在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...

  2. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  3. 修改html很实用的insertAdjacentHTML方法

    添加HTML内容与文本内容以前用的是innerHTML与innerText方法, 最近发现还有insertAdjacentHTML和 insertAdjacentText方法, 这两个方法更灵活,可以 ...

  4. insertAdjacentHTML方法详解

    添加HTML内容与文本内容以前用的是innerHTML与innerText方法, 最近发现还有insertAdjacentHTML和 insertAdjacentText方法, 这两个方法更灵活,可以 ...

  5. [六] 函数式接口的复合方法示例 predicate 谓词逻辑运算 Function接口 组合运算 比较器 逆序 比较链

    复合的方法 有些函数式接口提供了允许复合的方法 也就是可以将Lambda表达式复合成为一个更加复杂的方法 之前的章节中有说到: 接口中的compose, andThen, and, or, negat ...

  6. jquery Ajax请求示例，jquery Ajax基本请求方法示例

    jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...

  7. vue不通过路由直接获取url中参数的方法示例

    vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...

  8. javascript DOM操作中的insertAdjacentHTML方法

    插入HTML内容与文本内容以前用的是innerHTML与innerText方法,今天看到insertAdjacentHTML和 insertAdjacentText两个API,特地学习一下: inse ...

  9. firewalld·使用方法示例

    firewalld使用方法示例 # systemctl start firewalld # 启动, # systemctl enable firewalld # 开机启动 # systemctl st ...

随机推荐

  1. mac下 jenkins 环境搭建

    这几天搞了一些持续集成的工作,在所难免的接触到了jenkins ,下边写一下jenkins 在 mac os 环境下的搭建和配置. 1.tomcat 下载 前往apache 官网下载所需版本的tomc ...

  2. js中的break ,continue, return (转)

    面向对象编程语法中我们会碰到break ,continue, return这三个常用的关键字,那么关于这三个关键字的使用具体的操作是什么呢?我们在使用这三关键字的时候需要注意和需要理解的规则是什么呢? ...

  3. android共享内存

    在android下不能通过shm_open使用共享内存. 网上有好多关于android下使用Ashmem实现共享内存的,但经过尝试该方法可以mmap出内存,但是和另一个进程没有实现共享. 具体的使用方 ...

  4. 使用sublime遇到的问题汇总

    问题一:用GBK编码的文件用Sublime打开出现中文乱码的解决办法: 通过ctrl+shift+p--package control install安装插件"ConvertToUTF8&q ...

  5. 【转载】ANSYS完全法与模态叠加法瞬态分析实例

    原文地址:http://www.caetecc.com/thread-2172-1-1.html ! 半脉冲载荷 --- 模态叠加法fini/clear,nostart/PREP7ET,1,BEAM4 ...

  6. Lua 调用 Opencv 的方法

    Lua 调用 Opencv 的方法 最近想用 Lua 调用 Opencv 进行相关像素级操作,如:bitwise_and 或者 bitwise_or,从而完成图像 IoU 的计算. 那么,怎么用 Lu ...

  7. 使用jQuery Autocomplete(自动完成)插件

    jQuery 的Autocomplete(自动完成.自动填充)插件有不少,但比较下来我感觉,还是bassistance.de 的比较强大,我们就来写一些代码感受一下. 最简单的Autocomplete ...

  8. [MySQL5.6 新特性] 全局事务标示符(GTID)

    GTID的全称为 global transaction identifier  , 可以翻译为全局事务标示符,GTID在原始master上的事务提交时被创建.GTID需要在全局的主-备拓扑结构中保持唯 ...

  9. 显示intent和隐示intent有什么区别

    显式Intent定义:对于明确指出了目标组件名称的Intent,我们称之为显式Intent. 隐式Intent定义:对于没有明确指出目标组件名称的Intent,则称之为隐式Intent. 说明:And ...

  10. 黄聪：HtmlAgilityPack中SelectSingleNode的XPath和CSS选择器

    XPath和CSS选择器 原文:http://ejohn.org/blog/xpath-css-selectors 最近,我做了很多工作来实现一个同时支持XPath和CSS 3的解析器,令我惊讶的是: ...