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 使用手册(四)
Sep 23 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
Vue数据双向绑定原理实例解析
May 15 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
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
Nginx实现反向代理
2017/09/20 Servers
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
详细分析vue响应式原理
2020/06/22 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
跟老齐学Python之复习if语句
2014/10/02 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
python字符串中的单双引
2017/02/16 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
python中remove函数的踩坑记录
2021/01/04 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
年终考核评语
2014/01/19 职场文书
给朋友的道歉短信
2015/05/12 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书