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 相关文章推荐
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
使用javascript插入样式
Mar 14 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
uni-app实现获取验证码倒计时功能
Nov 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
图象函数中的中文显示
2006/10/09 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
html下载本地
2006/06/19 Javascript
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
Sanic框架应用部署方法详解
2018/07/18 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python join方法使用详解
2019/07/30 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
python实现密码强度校验
2020/03/18 Python
Python新手学习raise用法
2020/06/03 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
金智子午JAVA面试题
2015/09/04 面试题
安全生产目标责任书
2014/04/14 职场文书
中学生运动会口号
2014/06/07 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python