如何在指定的地方插入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 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
微信小程序实现聊天室功能
Jun 14 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
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
jquery自定义表格样式
2015/11/23 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
Python编写简单的HTML页面合并脚本
2016/07/11 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python读取中文txt文本的方法
2018/04/12 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
Python高并发和多线程有什么关系
2020/11/14 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
C/C++程序员常见面试题一
2012/12/08 面试题
房屋转让协议书范本
2014/04/11 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
护理专业求职信
2014/06/15 职场文书
小学语文复习计划
2015/01/19 职场文书
教师个人学习总结
2015/02/11 职场文书
为Centos安装指定版本的Docker
2022/04/01 Servers