insertAdjacentHTML方法详解
添加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方法详解的更多相关文章
- session的使用方法详解
session的使用方法详解 Session是什么呢?简单来说就是服务器给客户端的一个编号.当一台WWW服务器运行时,可能有若干个用户浏览正在运正在这台服务器上的网站.当每个用户首次与这台WWW服务器 ...
- Kooboo CMS - Html.FrontHtml[Helper.cs] 各个方法详解
下面罗列了方法详解,每一个方法一篇文章. Kooboo CMS - @Html.FrontHtml().HtmlTitle() 详解 Kooboo CMS - Html.FrontHtml.Posit ...
- HTTP请求方法详解
HTTP请求方法详解 请求方法:指定了客户端想对指定的资源/服务器作何种操作 下面我们介绍HTTP/1.1中可用的请求方法: [GET:获取资源] GET方法用来请求已被URI识别的资源.指定 ...
- ecshop后台增加|添加商店设置选项和使用方法详解
有时候我们想在Ecshop后台做个设置.radio.checkbox 等等来控制页面的显示,看看Ecshop的设计,用到了shop_config这个商店设置功能 Ecshop后台增加|添加商店设置选项 ...
- (转)Spring JdbcTemplate 方法详解
Spring JdbcTemplate方法详解 文章来源:http://blog.csdn.net/dyllove98/article/details/7772463 JdbcTemplate主要提供 ...
- C++调用JAVA方法详解
C++调用JAVA方法详解 博客分类: 本文主要参考http://tech.ccidnet.com/art/1081/20050413/237901_1.html 上的文章. C++ ...
- windows.open()、close()方法详解
windows.open()方法详解: window.open(URL,name,features,replace)用于载入指定的URL到新的或已存在的窗口中,并返回代表新窗口的Win ...
- CURL使用方法详解
php采集神器CURL使用方法详解 作者:佚名 更新时间:2016-10-21 对于做过数据采集的人来说,cURL一定不会陌生.虽然在PHP中有file_get_contents函数可以获取远程 ...
- JAVA 注解的几大作用及使用方法详解
JAVA 注解的几大作用及使用方法详解 (2013-01-22 15:13:04) 转载▼ 标签: java 注解 杂谈 分类: Java java 注解,从名字上看是注释,解释.但功能却不仅仅是注释 ...
随机推荐
- 第1章 PHP快速入门
1.最好使用<?php ?> 即XML风格的PHP标记: 2.echo语句:将传递给其自身的字符串打印到浏览器: 3.注释:①C风格的多行注释/* */ ②C++风格的单行注释// ...
- 关于指针要注意的地方还有尝试在codeblocks上建立项目
1.字符串: char a[]="house"; char *b="house"; a[2]='r';可以 b[2]='r'不可以,因为这个指针变量指的是字 ...
- Url有值怎么使用get传值
原来url有数据 test 我们可以$_GET可以获取出来 一般form表单头用get方式都可以满足大多需求 但有一种情况 url里已经有值的时候 用url就会覆盖原来的值 而数据就会丢失 : 数据又 ...
- 客户端socket调用
import java.net.Socket; import java.io.*; import java.util.Scanner; import java.util.regex.Pattern; ...
- 手动搭建SSI框架
SSI框架为struts.spring.ibatis,在该框架中,使用ibatis作为数据持久层,其中ibatis使用最新版本mybatis3. 注:本文使用版本:struts-2.3.4.sprin ...
- Sublime Text 2
常用功能: 安装Package Control:https://sublime.wbond.net/ 多行选择.多行编辑鼠标选中多行,按下 Ctrl+Shift+L (Command+Shift+L) ...
- z-index研究
文章来源: http://www.neoease.com/css-z-index-property-and-layering-tree/ 总结: 1.z-index只有在设置position:rela ...
- 配置IIS提示打开目录浏览时的问题:未能从程序集“System.ServiceModel, Version=3.0.0.0”中加载类型“System.ServiceModel.Activation.HttpModule” 的解决办法
错误消息: 未能从程序集“System.ServiceModel, Version=3.0.0.0”中加载类型“System.ServiceModel.Activation.HttpModule” 的 ...
- aps.net 页面事件执行顺序
- Testing a Redux & React web application
Part 1 - https://www.youtube.com/watch?v=iVKPbH3qyW0 Part 2 - https://www.youtube.com/watch?v=M5lwOs ...