JS把内容动态插入到DIV的实现方法
更新时间：2016年07月19日 10:07:58 投稿：jingxian
下面小编就为大家带来一篇JS把内容动态插入到DIV的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
<!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基于Dom操作实现查找、修改HTML元素的内容及属性的方法
这篇文章主要介绍了JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法,涉及javascript dom模型及事件响应相关操作技巧,需要的朋友可以参考下2017-01-01
这篇文章详细介绍了Javascript中创建对象的几种方式与每种方式的优缺点，其中包括工厂模式、构造函数模式、原型模式和组合使用构造函数模式和原型模式，有需要的小伙伴们一起来学习学习吧。2016-08-08
这篇文章主要介绍了JavaScript 处理树数据结构的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
这篇文章主要为大家详细介绍了微信小程序实现九宫格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要介绍了JavaScript中的类数组对象介绍,一个对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情况下,这些对象被称为“类数组对象”,需要的朋友可以参考下2014-12-12
在这个实例中需要注意的是，要把images文件夹下图片的命名设置为有顺序的，1、2、3..才可以，感兴趣的朋友可以参考下2013-04-04
搜索页面内容的js代码，不过这效率不是很高，大篇幅内容不建议使用。2009-12-12
for...in循环中的循环计数器是字符串，而不是数字它包含当前属性的名称或当前数组元素的索引，下面有个不错的示例大家可以参考下2013-11-11
平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时，会有一个类似于进度条的长条进行提示用户输入的密码强度。那么这种效果怎么实现的呢？下面小编给大家介绍下js动态检验密码强度的实现方法，一起看看吧2016-11-11
本篇文章主要介绍了微信小程序之多文件下载的简单封装示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论