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 相关文章推荐
jQuery Autocomplete自动完成插件
Jul 17 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 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作的文本留言本的例子(五)
2006/10/09 PHP
PHP 编程的 5个良好习惯
2009/02/20 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
服务员岗位职责
2014/01/29 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
初中语文教学反思范文
2016/03/03 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书