如何在指定的地方插入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 写类方式之三
Jul 05 Javascript
js里的prototype使用示例
Nov 19 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
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
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php设计模式之单例模式代码
2016/06/11 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
模范家庭事迹材料
2014/02/10 职场文书
入党现实表现材料
2014/12/23 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
我是特种兵观后感
2015/06/11 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
班级管理经验交流材料
2015/11/02 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技