如何在指定的地方插入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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
javascript中length属性的探索
Jul 31 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 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
3.从实例开始
2006/10/09 PHP
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
js canvas实现红包照片效果
2018/08/21 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
Python发送Email方法实例
2014/08/21 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
出纳的岗位职责
2013/11/09 职场文书
主题团日活动总结
2014/06/25 职场文书
《所见》教学反思
2016/02/23 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技