如何在指定的地方插入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 相关文章推荐
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
Node.js事件驱动
Jun 18 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 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
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
javascript类型转换示例
2014/04/29 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
ES6的新特性概览
2016/03/10 Javascript
bootstrap table实例详解
2017/01/06 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
python爬虫之百度API调用方法
2017/06/11 Python
python针对excel的操作技巧
2018/03/13 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
八项规定整改措施
2014/02/12 职场文书
教育技术职业规划范文
2014/03/04 职场文书
文秘应届生求职信
2014/07/05 职场文书
学生安全责任书范本
2014/07/24 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
小学语文复习计划
2015/01/19 职场文书
英语辞职信怎么写
2015/02/28 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
python playwrigh框架入门安装使用
2022/07/23 Python