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背投广告代码的完善
Apr 08 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
Angular6项目打包优化的实现方法
Dec 15 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
如何理解Vue简单状态管理之store模式
May 15 Vue.js
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 gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
简单谈谈favicon
2015/06/10 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
yy婚礼主持词
2014/03/14 职场文书
公司运动会策划方案
2014/05/25 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
环保志愿者活动方案
2014/08/14 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
高中数学课堂教学反思
2016/02/18 职场文书