JS把内容动态插入到DIV的实现方法

2019-12-17,

<!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实现按圆形排列DIV元素(一)
  • javascript实现鼠标点击页面 移动DIV
  • JS控制div跳转到指定的位置的几种解决方案总结
  • js实现非常棒的弹出div
  • 完美的js div拖拽实例代码
  • 基于JavaScript实现鼠标向下滑动加载div的代码
  • AngularJS动态生成div的ID源码解析
  • JS获取一个未知DIV高度的方法
  • JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
  • js动态添加的DIV中的onclick事件简单实例
  • js 动态添加元素(div、li、img等)及设置属性的方法
  • 基于javascript实现按圆形排列DIV元素(二)

《JS把内容动态插入到DIV的实现方法.doc》

下载本文的Word格式文档,以方便收藏与打印。