添加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. Hive自定义函数的学习笔记(1)

    前言: hive本身提供了丰富的函数集, 有普通函数(求平方sqrt), 聚合函数(求和sum), 以及表生成函数(explode, json_tuple)等等. 但不是所有的业务需求都能涉及和覆盖到 ...

  2. js数字时钟

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HTML5上传图片到ASP.NET.MVC

    @{ ViewBag.Title = "Home Page";} <!DOCTYPE HTML PUBLIC><html><head> < ...

  4. ST第二次作业，相关程序测试及测试用例

    public static int findLast(int[]x,int y){ for(int i = x.length-1;i>0;i--){//i>=0 if(x[i] == y) ...

  5. eclipse连接mysql，插入数据时乱码

    问题:如果eclipse中项目的编码方式为utf-8 插入数据后,在数据库中查看后,汉字出现乱码情况 解决方法: 1.在获取连接的时候将conn = DriverManager.getConnecti ...

  6. 一些好的python IDE

    pyscipter 是一个不错的选择,快速灵巧.功能丰富.它的安装包只有五六兆,功能却一个都不少.语法高亮功能也很强,运算符.数字.hex都能按照你的需要改变颜色.还有非常灵敏的code comple ...

  7. [原] wmic: Invalid XSL format (or) file name错误解决方法

    之前运行wmic命令正确,今天在服务器上出现Invalid XSL format (or) file name的提示,搜索了一下,在这里找到了答案: http://www.ctkn.net/2011/ ...

  8. app升级方法

    1.到那里找apk? (1)Android Studio菜单Build->Generate Signed APK     (2)弹出窗口     (3)创建密钥库及密钥,创建后会自动选择刚创建的 ...

  9. cPage分页，asp.net自定义分页，url传值分页，支持datalist、gridview、Repeater等

    asp.net分页是最最常用的功能,实现方式也很多,使用不同的控件有不同的分页方式. 下面分享一个我们团队内部使用了多年的一个分页控件cPage,是自己设计编写,没有冗余,简单.快速. cPage,现 ...

  10. 百度地图api 标注的图标不显示问题

    图中郑州PPT设计制作中心前面应该有一个小的标,但是死活就是不显示. 经过百度搜索和测试,终于解决.应该是页面定义的CSS和百度的冲突了,解决办法如下: 在当前页面中,加入 <style typ ...