JS插入html代码

最新推荐文章于 2025-10-14 15:06:10 发布

转载最新推荐文章于 2025-10-14 15:06:10 发布 · 3.5w 阅读

文章标签：

#js #innerHTML

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍两种使用JavaScript动态更新HTML元素内容的方法。一种是直接修改innerHTML属性来插入包含文本和标签的内容；另一种是通过创建DOM元素并附加TextNodes来构建更复杂的DOM结构。

HTML部分

<div id="testdiv"></div>

JS部分

方法一：

window.onload = function() {
  var testdiv = document.getElementById("testdiv");
  testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>";
}

注：

var a ="I inserted this content."

若html中有双引号则用单引号引出

var a='...'

方法二：

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);
}