如何在点击时动态添加到DOM？

在Web开发中，动态地将元素添加到DOM（文档对象模型）是一种常见的任务，尤其是在处理用户交互时。以下是如何在点击事件发生时动态添加元素到DOM的基础概念和相关实现方法。

基础概念

DOM（文档对象模型）：DOM是一个编程接口，它表示HTML和XML文档的结构，并允许程序和脚本动态地访问和更新文档的内容、结构和样式。
事件监听：在JavaScript中，可以为DOM元素添加事件监听器，以便在特定事件（如点击）发生时执行代码。

实现方法

以下是一个简单的示例，展示了如何在点击按钮时向页面添加一个新的段落元素。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic DOM Insertion</title>
</head>
<body>
<button id="addButton">Add Paragraph</button>
<div id="content"></div>

<script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    // 获取按钮和内容容器的引用
    var addButton = document.getElementById('addButton');
    var contentDiv = document.getElementById('content');

    // 为按钮添加点击事件监听器
    addButton.addEventListener('click', function() {
        // 创建一个新的段落元素
        var newParagraph = document.createElement('p');
        newParagraph.textContent = 'This is a dynamically added paragraph.';

        // 将新段落添加到内容容器中
        contentDiv.appendChild(newParagraph);
    });
});