如何在指定的地方插入html内容和文本内容


Posted in Javascript onDecember 23, 2013

dhtml提供了两个方法来进行添加,insertAdjacentHTML和insertAdjacentText
insertAdjacentHTML方法:在指定的地方插入html标签语句。
原型:insertAdjacentHTML(swhere,stext)
参数:
swhere:指定插入html标签语句的地方,有四种值可以用:
1.beforeBegin:插入到标签开始前
2.afterBegin:插入到标签开始标记后
3.beforeEnd:插入到标签结束标记前
4.afterEnd:插入到标签结束标记后
stext:要插入的内容
例:

var sHTML="<input type=button go2()" + " value='Click Me'><BR>" 
var sScript='<SCRIPT DEFER>' 
sScript = sScript + 'function go2(){ alert("Hello from inserted script.") }' 
sScript = sScript + '</script' + '>'; 
ScriptDiv.insertAdjacentHTML("afterBegin",sHTML + sScript);

在html正文中加入一行:
<DIV ID="ScriptDiv"></Div>
最终变成:
<DIV ID="ScriptDiv"> 
<input type=button onclick=go2() value='Click Me'><BR> 
<SCRIPT DEFER> 
function go2(){alert("Hello from inserted sctipt.")}' 
</script> 
</DIV>

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

这两个属性还是比较适用的,尤其是在绘图等地方用的比较多,它的优点是不会覆盖原有的内容,让我们来假设一下吧,有一个DIV,它里面已经有内容了,现在我们还要动态的添加内容进去,而又不能覆盖原有的内容,那么这时候这个东西就很重要了,innerHTML是会把原有的东西覆盖掉的。
所有成对出现的HTML都可以用这个属性,这点和innerHTML一样,比如<body>..</body>、<div>....</div>等这些都有这两个属性

补充下:刚才我试了下,innerHTML这个属性是可读写的,以前我知道innerHTML可以对节点插入内容,但是这个属性也是可读的,也就是说innerHTML中保存的是节点的html内容;看下以下代码就完全明白了:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>无标题文档</title> 
</head> 
<body> 
safdsdaf按时地方 
<script language="javascript"> 
alert(document.body.innerText) 
</script> 
</body> 
</html>

上面是我转帖到别人的代码,下面我再补充几行代码,也很经典有,也许你用的着:
<script language="javascript" type="text/javascript"> 
function addFile() 
{ 
var filebutton = '<br><input type="file" size="50" name="File" />'; 
document.getElementByIdx('FileList').insertAdjacentHTML("beforeEnd",filebutton); 
} 
</script>

上面的是Head里面的脚本,下面是body里面的:html代码:
<p id="FileList"> 
<input type="file" runat="server" size="50" name="File"/> 
</p>

你把代码拷贝到文件中保存成一个html就知道效果了。
Javascript 相关文章推荐
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
Vue+Django项目部署详解
May 30 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 #Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 #Javascript
js 通用订单代码
Dec 23 #Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 #Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 #Javascript
浮动的div自适应居中显示的js代码
Dec 23 #Javascript
javascript实现简单的Map示例介绍
Dec 23 #Javascript
You might like
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
如何写php程序?
2006/12/08 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
理解javascript回调函数
2014/12/28 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
python实现PID算法及测试的例子
2019/08/08 Python
Python的垃圾回收机制详解
2019/08/28 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
"序列点" 是什么
2016/07/29 面试题
大堂副理的岗位职责范文
2014/02/17 职场文书
遗嘱继承公证书
2014/04/09 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
python中取整数的几种方法
2021/11/07 Python