如何在指定的地方插入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实现的抽象CSS圆角效果!!
May 03 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
jQuery is()函数用法3例
May 06 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
小试SVG之新手小白入门教程
2019/01/08 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
利用python循环创建多个文件的方法
2018/10/25 Python
python中几种自动微分库解析
2019/08/29 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
Linux机考试题
2015/10/16 面试题
茶叶生产计划书
2014/01/10 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
买房子个人收入证明
2014/10/12 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
Golang的继承模拟实例
2021/06/30 Golang
SQL Server表分区删除详情
2021/10/16 SQL Server