JS把内容动态插入到DIV的实现方法


Posted in Javascript onJuly 19, 2016
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Testing</title>
</head>
<script type="text/javascript" src="example.js">
</script>
<body>
<div id="testdiv">
</div>
</body>
</html>

example.js 文件内容:

window.onload = function() {
 var testdiv = document.getElementById("testdiv");
 testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>";
}

另一段代码:

window.onload = function() {
 var para = document.createElement("p");
 var txt1 = document.createTextNode("I inserted ");
 var emphasis = document.createElement("em");
 var txt2 = document.createTextNode("this");
 var txt3 = document.createTextNode(" content.");
 para.appendChild(txt1);
 emphasis.appendChild(txt2);
 para.appendChild(emphasis);
 para.appendChild(txt3);
 var testdiv = document.getElementById("testdiv");
 testdiv.appendChild(para);
}

这与在DIV内动态载入另一个页面非常相似!

以上这篇JS把内容动态插入到DIV的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
JS动态给对象添加事件的简单方法
Jul 19 #Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 #Javascript
Bootstrap表单布局
Jul 19 #Javascript
一次$.getJSON不执行的简单记录
Jul 19 #Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 #Javascript
javascript弹出带文字信息的提示框效果
Jul 19 #Javascript
总结在前端排序中遇到的问题
Jul 19 #Javascript
You might like
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
python 用struct模块解决黏包问题
2020/11/07 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
有机童装:Toby Tiger
2018/05/23 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
物业管理应届生求职信
2013/10/28 职场文书
社区服务活动总结
2014/05/07 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
投标承诺函范文
2015/01/21 职场文书
金秋助学感谢信
2015/01/21 职场文书
世界红十字日活动总结
2015/02/10 职场文书
限期整改通知书
2015/04/22 职场文书