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

(编辑：jimmy 日期: 2025/9/30 浏览：2)

<!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="/UploadFiles/2021-04-02/example.js">

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的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇：js 动态添加元素(div、li、img等)及设置属性的方法

下一篇：JS动态给对象添加事件的简单方法