如何在指定的地方插入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 相关文章推荐
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
vue实现点击追加选中样式效果
Nov 01 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 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:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
PHP中include与require使用方法区别详解
2013/10/19 PHP
微信支付开发订单查询实例
2016/07/12 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
详解python中的线程与线程池
2019/05/10 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
如何进行Linux分区优化
2016/09/13 面试题
发布会邀请函
2015/01/31 职场文书
接待员岗位职责
2015/02/13 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
借款民事起诉状范文
2015/05/19 职场文书
python_tkinter事件类型详情
2022/03/20 Python