JavaScript DOM操作：获取并插入指定HTML元素内容-js教程-PHP中文网

JavaScript DOM操作：获取并插入指定HTML元素内容

碧海醫心

发布： 2025-07-11 21:42:03

原创

657人浏览过

JavaScript DOM操作：获取并插入指定HTML元素内容

本文旨在详细讲解如何使用JavaScript进行DOM操作，从HTML文档中准确提取特定子元素（如）的文本或HTML内容，并将其动态插入到另一个指定ID的HTML元素中。我们将探讨常见的错误、提供最佳实践，并通过代码示例演示正确的实现方法，帮助开发者高效地操控网页内容。

理解DOM操作基础

在web开发中，文档对象模型（dom）是html和xml文档的编程接口。它允许我们通过javascript访问和操作文档的内容、结构和样式。进行dom操作时，核心在于正确地选择（或称“查询”）到你想要操作的html元素。

1. document对象的重要性

所有DOM操作都始于document对象。它代表了整个HTML文档。例如，getElementById()、getElementsByTagName()等方法都属于document对象。初学者常犯的错误是直接调用getElementById()，而忽略了其前缀document.，导致函数未定义错误。因此，正确的调用方式应始终是document.getElementById()或document.getElementsByTagName()。

2. 元素选择方法

document.getElementById(id): 这是最常用也是最高效的选择方法，通过元素的唯一ID来获取元素。一个HTML文档中，ID应该是唯一的。
document.getElementsByTagName(tagName): 通过标签名获取元素集合（HTMLCollection）。它返回的是一个类数组对象，即使只有一个元素，也需要通过索引（如[0]）来访问。
document.querySelector(selector) / document.querySelectorAll(selector): 更现代且强大的选择方法，允许使用CSS选择器来选择元素。querySelector返回第一个匹配的元素，querySelectorAll返回所有匹配的元素（NodeList）。

获取指定元素内容的标准方法

为了方便和准确地获取HTML元素的内容，最佳实践是为目标元素赋予一个唯一的ID。

立即学习“Java免费学习笔记（深入）”；

1. 为目标元素添加ID（最佳实践）

假设我们有一个元素，其内容需要被提取。为了便于JavaScript访问，我们应该给它一个ID，例如(2)。

2. 通过ID获取元素并提取内容

一旦元素有了ID，我们就可以使用document.getElementById()来获取它，并通过其innerHTML属性来提取其包含的HTML或文本内容。

// 获取ID为 "theSpan" 的span元素的内容
const spanContent = document.getElementById("theSpan").innerHTML;
// 此时，spanContent 变量将包含字符串 "(2)"

登录后复制

innerHTML属性会返回元素内部的所有HTML内容（包括标签）。如果只需要纯文本内容，可以使用innerText属性。

将内容插入到另一元素

获取到所需内容后，下一步就是将其插入到页面上的另一个指定位置。

1. 获取目标插入点

同样，为了准确地将内容插入到某个元素中，该元素也应该有一个ID。例如，我们有一个

标签用于显示内容，可以给它一个ID：

。

然后，使用document.getElementById()获取这个目标元素：

// 获取ID为 "placeSpanVAR" 的p元素
const targetParagraph = document.getElementById("placeSpanVAR");

登录后复制

2. 赋值innerHTML

将之前提取到的内容赋值给目标元素的innerHTML属性，即可实现内容的插入。

// 将 spanContent 的值赋给 targetParagraph 的 innerHTML
targetParagraph.innerHTML = spanContent;

登录后复制

重要提示： 请注意，这里是targetParagraph.innerHTML = spanContent;，而不是targetParagraph = spanContent;。前者是将内容赋值给DOM元素的属性，而后者是将DOM元素的引用变量targetParagraph重新赋值为一个字符串，这会导致targetParagraph不再指向DOM元素，从而无法更新页面显示。

完整示例代码

下面是一个完整的HTML和JavaScript示例，演示了如何获取元素的内容并将其插入到

元素中：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作示例：获取并插入元素内容</title>
</head>
<body>

    <tbody id="spanID">
        <tr>
            <td colspan="100" nowrap="nowrap" class="ms-gb">
                <a href="javascript:void(0);" onclick=""></a>
                <span id="theSpan">(2)</span> <!-- 给span元素一个唯一的ID -->
            </td>
        </tr>
    </tbody>
    <br>
    <p id="placeSpanVAR"></p> <!-- 目标p元素 -->

    <script>
        // 定义一个函数来执行DOM操作
        function updateContent() {
            // 1. 获取源span元素的内容
            const spanContent = document.getElementById("theSpan").innerHTML;

            // 2. 获取目标p元素
            const targetParagraph = document.getElementById("placeSpanVAR");

            // 3. 将span的内容插入到p元素中
            targetParagraph.innerHTML = spanContent;

            // 可以在控制台查看结果
            console.log("Span内容已成功插入:", targetParagraph.innerHTML);
        }

        // 确保DOM完全加载后再执行JavaScript
        // 推荐使用DOMContentLoaded事件监听器
        document.addEventListener('DOMContentLoaded', updateContent);

        // 或者，如果脚本放在body底部，也可以直接调用函数
        // updateContent();
    </script>

</body>
</html>

登录后复制

在上述代码中，当页面加载完成后（DOMContentLoaded事件触发），updateContent函数会被执行。它会找到ID为theSpan的元素，提取其内容"(2)"，然后将其赋给ID为placeSpanVAR的

元素的innerHTML，最终在页面上显示"(2)"。