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与DropDownList 区别分析
Jan 01 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
小程序如何支持使用 async/await详解
Sep 12 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
js实现小星星游戏
Mar 23 Javascript
JavaScript手写数组的常用函数总结
Nov 22 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
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
Python调用C++程序的方法详解
2017/01/24 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
轻化专业学生实习自我鉴定
2013/09/20 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers