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 相关文章推荐
node.js调用C++开发的模块实例
Jul 03 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
Vue递归实现树形菜单方法实例
Nov 06 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 中文和编码判断代码
2010/05/16 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
原生js 秒表实现代码
2012/07/24 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
进一步了解Python中的XML 工具
2015/04/13 Python
windows下python连接oracle数据库
2017/06/07 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
python监控进程脚本
2018/04/12 Python
python之mock模块基本使用方法详解
2019/06/27 Python
django admin 添加自定义链接方式
2020/03/11 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
初中地理教学反思
2014/01/11 职场文书
2014年教育工作总结
2014/11/26 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
关于mysql中string和number的转换问题
2022/06/14 MySQL