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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
angularjs路由传值$routeParams详解
Sep 05 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
JS实现数组去重的11种方法总结
Apr 04 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 简单日历实现代码
2009/10/28 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
jquery text()要注意啦
2009/10/30 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
python检测远程服务器tcp端口的方法
2015/03/14 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
自我评价优秀范文分享
2013/11/30 职场文书
大学活动策划书范文
2014/01/10 职场文书
学习委员自我鉴定
2014/01/13 职场文书
超级搞笑检讨书
2014/01/15 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
安全生产先进个人总结
2015/02/15 职场文书
消防演习感想
2015/08/10 职场文书