如何在指定的地方插入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 相关文章推荐
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
js 数据类型判断的方法
Dec 03 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 class中public,private,protected的区别以及实例分析
2013/06/18 PHP
PHP文件操作详解
2016/12/30 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
详解Python文件修改的两种方式
2019/08/22 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
中专自我鉴定范文
2013/10/16 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
门店业绩提升方案
2014/06/08 职场文书
校园环保标语
2014/06/13 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
2014年路政工作总结
2014/12/10 职场文书
先进班组材料范文
2014/12/25 职场文书
领导干部失职检讨书
2015/05/05 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
python tkinter实现定时关机
2021/04/21 Python
Golang的继承模拟实例
2021/06/30 Golang
canvas实现贪食蛇的实践
2022/02/15 Javascript
Golang入门之计时器
2022/05/04 Golang