如何在指定的地方插入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 的dialog和ztree结合实现步骤
Aug 02 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 Javascript
javascript的setTimeout()使用方法总结
Nov 20 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
谈一谈收音机的高放电路
2021/03/02 无线电
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php异常处理使用示例
2014/02/25 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
详解Bootstrap插件
2016/04/25 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
初探nodeJS
2017/01/24 NodeJs
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
vue.js中created方法作用
2018/03/30 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
vue实现微信分享功能
2018/11/28 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
python赋值操作方法分享
2013/03/23 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
python如何停止递归
2020/09/09 Python
大学毕业生简单自荐信
2013/11/05 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL