JS获取div中的内容|极客笔记

JS获取div中的内容

在网页开发中，经常会遇到需要获取页面中某个元素的内容的需求，特别是对于div元素来说，常常需要获取其内部的文本内容或者HTML结构。在JavaScript中，我们可以通过一些方法来实现获取div中的内容。

1. 使用innerHTML属性

innerHTML属性是用来获取和设置元素内部的HTML结构的属性，通过innerHTML可以获取包括标签在内的所有内容。下面是一个使用innerHTML属性获取div内容的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>获取div内容示例</title>
</head>
<body>
    <div id="myDiv">
        <p>Hello, world!</p>
    </div>

    <script>
        var divContent = document.getElementById('myDiv').innerHTML;
        console.log(divContent);
    </script>
</body>
</html>

运行以上代码，控制台会输出<p>Hello, world!</p>，这就是div中包含的HTML内容。

2. 使用innerText属性

与innerHTML不同，innerText属性是用来获取元素内部纯文本内容的属性，不包括HTML标签。下面是一个使用innerText属性获取div内容的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>获取div内容示例</title>
</head>
<body>
    <div id="myDiv">
        <p>Hello, world!</p>
    </div>

    <script>
        var divContent = document.getElementById('myDiv').innerText;
        console.log(divContent);
    </script>
</body>
</html>

运行以上代码，控制台会输出Hello, world!，这就是div中包含的纯文本内容。

3. 使用textContent属性

textContent属性也是用来获取元素内部纯文本内容的属性，与innerText类似，但是textContent会获取所有文本节点，包括<script>和<style>元素中的文本内容。下面是一个使用textContent属性获取div内容的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>获取div内容示例</title>
</head>
<body>
    <div id="myDiv">
        <p>Hello, world!</p>
    </div>

    <script>
        var divContent = document.getElementById('myDiv').textContent;
        console.log(divContent);
    </script>
</body>
</html>

运行以上代码，控制台也会输出Hello, world!，与innerText相同。