添加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. Python 文件操作函数

    这个博客是 Building powerful image classification models using very little data 的前期准备,用于把图片数据按照教程指示放到规定的文 ...

  2. 向内存0:200~0:23f依次传送数据0~3fh

    只能用字节为单位传送了. assume cs:sad sad segment start: mov ax, 20h mov ds, ax mov cx, 40h s: mov [bx], bl inc ...

  3. cat /proc/devices 和ls /dev

    对于新手来讲,linux的框架实在是太庞大,况且很多知识点需自己做才能理解 设备 文件 ,设备编号  #ll  -a /dev  在每一行都可以看到设备文件.设备编号(主.次) 对于每种硬件设备,系统 ...

  4. java 三个循环的优缺点

    package cc.knms.appservice.test; import java.text.ParseException; import java.util.ArrayList; import ...

  5. LINUX测试环境部署mysql（三）

    安装配置mysql 1.安装 查看有没有安装过: yum list installed mysql* rpm -qa | grep mysql* 查看有没有安装包: yum list mysql* 安 ...

  6. 在 AndroidStudio 中添加和使用 Support Library

    添加Support Library 项目需要用到Support包时如何添加?其实非常简单. 第一步 打开SDK Manager 确认安装了最新的Support Library 和 Support Re ...

  7. Exchange的AutoDiscover服务

    最近工作中涉及到Exchange的AutoDiscover服务,最初想学习后输出一个博客文章.但是最后是找到一篇中文博客文章已经非常清楚的解释了这个问题,如下: http://didda.blog.5 ...

  8. contiki学习笔记---process结构体

    process,字面意义,进程,看看它的结构 struct process { struct process *next; #if PROCESS_CONF_NO_PROCESS_NAMES #def ...

  9. iostat

    http://m.blog.csdn.net/article/details?id=43196731 http://blog.csdn.net/haiross/article/details/4319 ...

  10. 在 anyproxy 上做 mock 和 fuzz 测试

    引言 写这个工具,主要有几个原因: 最近老大在尝试不同视角的测试----健壮性测试,任务下来,所以挽起袖子就开撸了 app很可能因为后端api做了变更,返回了一个异常的值而出现难以预知的问题,健壮性受 ...