添加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. iOS 的主要框架

    框架:是一个目录,这个目录包含了共享库,访问共享库里代码的头文件,和其他的图片和声音的资源文件.一个共享库定义的方法或函数可以被应用程序调用. 每个框架对于 iOS 系统里的一层,每层建立在它下面层的 ...

  2. windows下使用Git命令汇总

    这里只是简单汇总下Git主要命令,方便记忆:汇总的不好,请各位包容,谢谢!想看详细讲解,推荐廖雪峰大神的教程,地址如下:http://www.liaoxuefeng.com/wiki/00137395 ...

  3. You need to use a Theme.AppCompat theme (or descendant) with this activity

    经过本人的经验和在网上查找,有2种方法可以解决. 解决步骤已经写到我的公众号,二维码在下面. 欢迎观看我的CSDN学院课程,地址:http://edu.csdn.net/course/detail/2 ...

  4. oracle执行cmd的实现方法

    网络上找到的在sqlplus中执行cmd的一些命令,主要有四种方法,这边都做了一下测试,这里做一下记录: 测试环境:window2003+Oracle 11.2.0.1.0 第一种方法: 最简单的执行 ...

  5. JavaScript常用对象的方法和属性

    ---恢复内容开始--- 本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩 ...

  6. nodejs-2:模块与包管理工具

    多人协作时,大量的js文件批量的引入到页面中,会出现变量被覆 盖掉方法被重写掉的情况,特别是存在一些依赖关系的时候,还容 易导致页面出错,这是因为js天生就缺少一种模块的管理机制来 隔离实现功能的js ...

  7. js代码实现下拉菜单

    效果 js代码: <script type="text/javascript"> function ShowSub(li) {//函数定义 var subMenu = ...

  8. Back-propagation, an introduction

    About Contact Subscribe   Back-propagation, an introduction Sanjeev Arora and Tengyu Ma  •  Dec 20, ...

  9. malloc分配的内存空间是连续的吗

    1.linux内核管理内存空间的分配,所有程序对内存空间的申请和其他操作,最终都会交给内核来管理. 2.linux实现的是“虚拟内存系统”,对用户而言,所有内存都是虚拟的,也就是说程序并不是直接运行在 ...

  10. 为毛无法创建文本文件COM1.txt

    是的,windows系统下,右键,新建文本文件,将文件名编辑为COM1.txt,确认,保存……THEN....你会发现无论如何也无法创建一个文本文件,名为COM1.txt. 猜是COM1被作为了IO设 ...