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 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
简单的Jquery全选功能
Nov 07 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
javascript实现在线客服效果
Jul 15 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 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知识收集
2012/08/20 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
vue组件间通信解析
2017/03/01 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
Python 性能优化技巧总结
2016/11/01 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Python安装selenium包详细过程
2019/07/23 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python配置文件写入过程详解
2019/10/19 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
公司外出活动方案
2014/08/14 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
导师工作推荐信
2015/03/27 职场文书