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 相关文章推荐
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
js调试系列 初识控制台
Jun 18 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
Javascript获取某个月的天数
May 30 Javascript
js实现搜索栏效果
Nov 16 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 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中__get()和__set()的用法实例详解
2013/06/04 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
深入理解python中的select模块
2017/04/23 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
pandas计数 value_counts()的使用
2019/06/24 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
中学教师实习自我鉴定
2013/09/28 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
利群广告词
2014/03/20 职场文书
个人公开承诺书
2014/03/28 职场文书
教师求职信范文
2014/05/24 职场文书
应届生求职自荐信
2014/07/04 职场文书
党小组鉴定意见
2015/06/02 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers