JavaScript实现动态内容插入DIV的两种方法
作者：竹影时间：2026-10-30 10:48:15浏览：99
本文介绍在JavaScript中将动态内容插入DIV的两种常用方法。第一种利用innerHTML属性直接赋值HTML字符串，适用于简单结构；第二种通过createElement和createTextNode构建DOM节点并追加，适用于需要精细控制或包含复杂嵌套元素的情况。
JavaScript实现动态内容插入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中嵌入另一个页面的效果类似。
以上就是JavaScript实现动态内容插入DIV的完整方法，供读者参考，欢迎支持本站。
作者最新文章
JS怎么使用classList添加、删除和切换class
2026-11-05 17:26:02
网页开发三者分工：HTML结构、CSS样式与JavaScript交互怎么协作
2026-11-05 12:51:22
JS解析URL参数时怎么处理中文乱码和特殊字符
2026-11-05 12:47:23
js-cookie 存储 JSON 对象：自动序列化与反序列化技巧
2026-11-05 12:36:26
marked.js 快速上手：安装与基础 Markdown 转 HTML 示例
2026-11-05 09:32:53