如何在指定的地方插入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 相关文章推荐
CSS和Javascript简单复习资料
Jun 29 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
JS上传前预览图片实例
Mar 25 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jquery分页对象使用示例
Apr 01 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
vuex进阶知识点巩固
May 20 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 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页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
python实现简易通讯录修改版
2018/03/13 Python
python仿抖音表白神器
2019/04/08 Python
Django发送邮件功能实例详解
2019/09/02 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
COSETTE官网:奢华,每天
2020/03/22 全球购物
高中运动会入场词
2014/02/14 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
党员政治学习材料
2014/05/14 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL