在前端开发中，经常需要通过JavaScript动态地向HTML中添加、删除或修改DOM元素。本文将介绍如何使用JavaScript插入HTML元素。
createElement()方法
要在HTML中插入一个新的元素，可以使用document.createElement()方法创建该元素，并将其添加到页面上。该方法接受一个参数，即要创建的元素的标签名称。例如，要创建一个新的段落元素，可以使用以下代码：
var para = document.createElement("p");此时，变量para就是一个新的<p>元素。但是，该元素还没有被添加到页面上。要将其添加到页面上，可以使用appendChild()方法将其添加到另一个元素的子节点列表中。例如，要将上面创建的段落元素添加到页面的<body>元素中，可以使用以下代码：
document.body.appendChild(para);
此时，新的段落元素就会被添加到页面的底部。
innerHTML属性
除了使用createElement()和appendChild()方法外，还可以使用innerHTML属性向页面中插入HTML代码。该属性可读写，可以获取或设置指定元素的HTML内容。
例如，要向页面中添加一些HTML代码，可以使用以下代码：
document.getElementById("myDiv").innerHTML = "<p>这是一个新的段落。</p>";在上面的代码中，getElementById()方法用于获取具有指定ID的元素，innerHTML属性用于将新的HTML代码插入到该元素中。
需要注意的是，使用innerHTML属性插入HTML代码时，应该注意避免XSS攻击。因为通过innerHTML属性插入的内容会被浏览器解释为HTML代码，并且可以包含JavaScript代码。因此，如果插入的内容来自用户输入或其他不可信的来源，应该先对其进行过滤或转义，以确保安全性。
使用示例
下面是一个完整的使用示例，演示如何使用JavaScript向页面中插入一个新的段落元素：
-- -------------------- ---- -------
--------- -----
------
------
-----------------------------------
-------
------
---- -----------
-----------------
------
--------
-- --------
--- ---- - ----------------------------
---------------- - ------------
-- -------------
--------------------------------
-- -------------------------
------------------------------------------ -- --------------------
---------
-------
-------在上面的示例中，首先通过createElement()方法创建一个新的段落元素，并将其添加到页面中；然后使用innerHTML属性向页面中添加另一个新的段落元素。最终，页面中会出现两个新的段落元素和一个原有的段落元素。
总结
本文介绍了如何使用JavaScript向HTML中插入新的元素或HTML代码。通过掌握createElement()和appendChild()方法以及innerHTML属性，可以方便地实现动态更新页面内容的功能。需要注意的是，在插入HTML代码时应该注意安全性，避免XSS攻击。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11370
