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判断、校验MAC地址的2个实例
May 05 Javascript
alert和confirm功能介绍
May 21 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
js canvas实现五子棋小游戏
Jan 22 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学习之PHP表达式
2006/10/09 PHP
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
两种php实现图片上传的方法
2016/01/22 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python解析nginx日志文件
2015/05/11 Python
python实现数独算法实例
2015/06/09 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
python 19个值得学习的编程技巧
2020/08/15 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
Ruby如何实现动态方法调用
2012/11/18 面试题
家长会学生家长演讲稿
2013/12/29 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
开票证明
2015/06/23 职场文书