如何在指定的地方插入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 ui resizable bug解决方法
Oct 26 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 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
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
python面向对象实现名片管理系统文件版
2019/04/26 Python
python中正则表达式与模式匹配
2019/05/07 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
导游词之江南园林狮子林
2019/09/16 职场文书