insertAdjacentHTML方法详解

时间:2022-08-27 18:34:07

添加HTML内容与文本内容以前用的是innerHTML与innerText方法,

最近发现还有insertAdjacentHTML和 insertAdjacentText方法,

这两个方法更灵活,可以在指定的地方插入html内容和文本内容。

insertAdjacentText方法与 insertAdjacentHTML方法类似,只不过只能插入纯文本,参数相同

方法名称:insertHtml(where,el,html)



参数介绍:

where:插入位置。包括beforeBegin,beforeEnd,afterBegin,afterEnd。

el:用于参照插入位置的html元素对象

html:要插入的html代码

insertAdjacentHTML
方法:在指定的地方插入html标签语句

原型:insertAdajcentHTML(swhere,stext)

参数:

swhere: 指定插入html标签语句的地方,

stext:要插入的内容

有四种值可用:

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

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

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

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

例如:

<html>  
         <head>  
         <mce:script language="<a href="http://lib.csdn.net/base/18" class='replace_word' title="JavaScript知识库" target='_blank' style='color:#df3434; font-weight:bold;'>JavaScript</a>">

<!--  
         function myfun(){  
             var obj = document.getElementById("btn1");  
             obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">");  
         } 
-->
         </mce:script>  
         </head>  
         <body>  
                <input name="txt">  
                <input id="btn1" name="btn1" type="button" value="更多" onclick="myfun()">  
         </body>  
</html>

<html>  
 <head>  
 <title>html insertAdjacentHTML插入新内容</title>  
 <mce:script language="jscript">
 <!--  
 function addsome()  
 {  
     document.all.paral.insertAdjacentHTML("afterBegin","<h1> 在文本前容器内插入内容1</h1>");  
     document.all.paral.insertAdjacentHTML("beforeEnd","<h2> 在文本后容器内插入内容2</h2>");  
     document.all.paral.insertAdjacentHTML("beforeBegin","<h4> 在文本前容器外插入内容4</h1>");  
     document.all.paral.insertAdjacentHTML("afterEnd","<h5> 在文本后容器外插入内容5</h2>");  
 }     
--></mce:script>  
 </head>  
 <body onload="addsome()">  
 <div id="paral" style="fontsize:6;color='#ff00ff'" mce_style="fontsize:6;color='#ff00ff'">原来的内容</div><hr>  
 </body>  
 </html>

<mce:script language="jscript"></mce:script>标签

Tiny MCE生成的

目的是防止javascript嵌入攻击。

这个标签可以用js的标签代替。

insertAdjacentHTML方法详解的更多相关文章

  1. session的使用方法详解

    session的使用方法详解 Session是什么呢?简单来说就是服务器给客户端的一个编号.当一台WWW服务器运行时,可能有若干个用户浏览正在运正在这台服务器上的网站.当每个用户首次与这台WWW服务器 ...

  2. Kooboo CMS - Html&period;FrontHtml&lbrack;Helper&period;cs&rsqb; 各个方法详解

    下面罗列了方法详解,每一个方法一篇文章. Kooboo CMS - @Html.FrontHtml().HtmlTitle() 详解 Kooboo CMS - Html.FrontHtml.Posit ...

  3. HTTP请求方法详解

    HTTP请求方法详解 请求方法:指定了客户端想对指定的资源/服务器作何种操作 下面我们介绍HTTP/1.1中可用的请求方法: [GET:获取资源]     GET方法用来请求已被URI识别的资源.指定 ...

  4. ecshop后台增加&vert;添加商店设置选项和使用方法详解

    有时候我们想在Ecshop后台做个设置.radio.checkbox 等等来控制页面的显示,看看Ecshop的设计,用到了shop_config这个商店设置功能 Ecshop后台增加|添加商店设置选项 ...

  5. &lpar;转&rpar;Spring JdbcTemplate 方法详解

    Spring JdbcTemplate方法详解 文章来源:http://blog.csdn.net/dyllove98/article/details/7772463 JdbcTemplate主要提供 ...

  6. C&plus;&plus;调用JAVA方法详解

    C++调用JAVA方法详解          博客分类: 本文主要参考http://tech.ccidnet.com/art/1081/20050413/237901_1.html 上的文章. C++ ...

  7. windows&period;open&lpar;&rpar;、close&lpar;&rpar;方法详解

    windows.open()方法详解:         window.open(URL,name,features,replace)用于载入指定的URL到新的或已存在的窗口中,并返回代表新窗口的Win ...

  8. CURL使用方法详解

    php采集神器CURL使用方法详解 作者:佚名  更新时间:2016-10-21   对于做过数据采集的人来说,cURL一定不会陌生.虽然在PHP中有file_get_contents函数可以获取远程 ...

  9. JAVA 注解的几大作用及使用方法详解

    JAVA 注解的几大作用及使用方法详解 (2013-01-22 15:13:04) 转载▼ 标签: java 注解 杂谈 分类: Java java 注解,从名字上看是注释,解释.但功能却不仅仅是注释 ...

随机推荐

  1. HTML5 屏蔽触屏滚动

    开发移动的html应用时常常需要将网页触控事件屏蔽掉.代码如下: //屏蔽全局触控事件 document.ontouchmove = function(e){ e.preventDefault();} ...

  2. 黑马程序员&plus;SQL基础(上)

    黑马程序员+SQL基础 ---------------<a href="http://edu.csdn.net"target="blank">ASP ...

  3. Union函数

    . 共用体声明和共用体变量定义 共用体(参考“共用体”百科词条)是一种特殊形式的变量,使用关键字union来定义 共用体(有些人也叫"联合")声明和共用体变量定义与结构体十分相似. ...

  4. Sublimetext (for windows)编译运行c出现Error 2错误的解决办法

      错误描述大概如下: [Error 2]  [cmd:  [u'bash', u'-c', u"g++ 'D:\\codeblocks\\project\\test.c' -o 'D:\\ ...

  5. LINQ学习系列-----1&period;4 匿名对象

    本篇内容接着上一篇继续讲述,本篇简单讲解匿名对象 一.匿名对象介绍              上代码: var result=new { ID=, Name="张三", Age= ...

  6. C语言程序设计第三次作业——选择结构(1)

    一.改错题 1.题目计算f(x)的值:输入实数x,计算并输出下列分段函数f(x)的值,输出时保留1位小数. 源程序(有错误的程序): #include <stdio.h> int main ...

  7. 在Gazebo中使用DEM構建起伏地形環境

    所需資料下載地址: 1. https://bitbucket.org/osrf/gazebo_tutorials/raw/default/dem/files/ 数字高程模型(致謝谷歌翻譯)概述数字高程 ...

  8. &lowbar;&lowbar;x&lowbar;&lowbar;&lpar;40&rpar;0909第五天&lowbar;&lowbar;表格 table 的 css 样式 美化

    如果就向下面的代码那样,不写 tbody , 则浏览器自添加 tbody , 并将所有的 tr 移入 tbody 意味着 tr 并非 table 的子元素,而是 tbody 的子元素. 所以 以后编写 ...

  9. Linux之整理bash命令类型

    作业四:整理bash命令类型,验证寻找一个命令的优先级 类型 ==> alias ==> Compound Commands ==> function ==> build_in ...

  10. Jupyter-1-安装Anaconda3及更改路径

    Jupyter Notebook测试Python3,可以将图文.代码有效融合,进行交互式编程,适合学习讲解及方案沟通. 1.下载Anaconda3 可以到官网或是清华大学软件镜像站去下载. 路径:ht ...