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中的prototype属性实例分析说明
Aug 09 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
php时间不正确的解决方法
2008/04/09 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
Python  连接字符串(join %)
2008/09/06 Python
Python迭代用法实例教程
2014/09/08 Python
python安装以及IDE的配置教程
2015/04/29 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
Python之pymysql的使用小结
2019/07/01 Python
Python秒算24点实现及原理详解
2019/07/29 Python
python内打印变量之%和f的实例
2020/02/19 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
环境工程大学生个人的自我评价
2013/10/08 职场文书
物控部经理职务说明书
2014/02/25 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
讲座通知范文
2015/04/23 职场文书
廉洁自律证明
2015/06/24 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
keepalived + nginx 实现高可用方案
2022/12/24 Servers