如何在指定的地方插入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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
Jquery 基础学习笔记
May 29 Javascript
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
jQuery 中DOM 操作详解
Jan 13 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
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面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
Vue计算属性的使用
2017/08/04 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
vue多次循环操作示例
2019/02/08 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
什么是抽象
2015/12/13 面试题
护理毕业生自我鉴定
2014/02/11 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
大学运动会入场词
2014/02/22 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
保险专业求职信
2014/07/07 职场文书
简单租房协议书
2014/10/21 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
奖金申请报告模板
2015/05/15 职场文书
个人借条范本
2015/05/25 职场文书
叶问观后感
2015/06/15 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python