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
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
基于对象合并功能的实现示例
Oct 10 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 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中redis的用法深入解析
2014/02/20 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
Jquery把获取到的input值转换成json
2017/05/15 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
一份婚庆公司创业计划书
2014/01/11 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
党员公开承诺书2015
2015/01/21 职场文书
面试通知短信
2015/04/20 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫