添加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. C#编程语言与面向对象—— 多态

    多态编程的基本原理是: 使用基类或接口变量编程. 在多态编程中,基类一般都是抽象类,其中拥有一个或多个抽象方法,各个子类可以根据需要重写这些方法.或者使用接口,每个接口都规定了一个或多个抽象方法,实现 ...

  2. 两个list取不同值

    转自同名博文,未知真正出处,望作者见谅 如题:有List<String> list1和List<String> list2,两个集合各有上万个元素,怎样取出两个集合中不同的元素 ...

  3. Windows下安装openssl

    安装python类库cryptography1.6提示 build\temp.win-amd64-2.7\Release\_openssl.c(429): fatal error C1083: Can ...

  4. ST第三次作业Junit安装

    一．Junit安装 安装eclipse,右键“项目”文件——>java build path——>导入jar包junit-4.12.jar和hamcrest-all-1.3.jar包. 二 ...

  5. codeforces Simple Molecules

    link:http://codeforces.com/contest/344/problem/B 刚开始想复杂了.一开始就想当然地以为可以有多个点,其实,人家题目要求只有3个点啊! 然后题目就简单了. ...

  6. h5调用摄像头

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  7. keepalived+nginx配置文件及检查nginx服务的脚本

    脚本一启动的速度要快一些哦,因为脚本二要判断两次以后才启动哎 这两个一般配合keepalived使用 脚本一: #!/bin/bash #author:fansik #description:chec ...

  8. Java操作redis简单示例

    第一:安装Redis    首先我们要安装Redis,就像我们操作数据库一样,在操作之前肯定要先创建好数据库的环境.    Redis的下载可以百度一下,或者打开下面的下载链接:    https:/ ...

  9. spring访问静态资源出错，No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js...

    问题:spring访问静态资源出错,No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js... web.x ...

  10. algorithm 学习之 for_each

    对于algorithm里面的函数使用不算多,但是用过之后才发现,之前写过很多多余的代码,所以打算系统的学习使用下algorithm里的东西,首先就是for_each. 先看下for_each的定义: ...