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 相关文章推荐
参考:关于Javascript中实现暂停的几篇文章
Mar 04 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
javascript实现智能手环时间显示
Sep 18 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
短波的认识
2021/03/01 无线电
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
python线程中的同步问题及解决方法
2019/08/29 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
2014年大学生就业规划书
2014/04/04 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
宾馆安全管理制度
2015/08/06 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS