jQuery innerHTML|极客教程

jQuery innerHTML

在jQuery中，innerHTML是一个非常常用且重要的属性，用于获取或设置指定元素的HTML内容。在本文中，我们将详细讨论innerHTML的用法和示例。

获取元素的HTML内容

要获取一个元素的HTML内容，可以使用以下方式：

let htmlContent = $('#myElement').html();
console.log(htmlContent);

上面的代码首先选取了一个id为myElement的元素，并使用jQuery的html()方法来获取它的HTML内容。这里的htmlContent变量将存储该元素的HTML内容。

设置元素的HTML内容

要设置一个元素的HTML内容，可以使用以下方式：

$('#myElement').html('<p>This is a new paragraph</p>');

上面的代码将会把一个新的<p>标签插入到id为myElement的元素中。这样，该元素的HTML内容将被替换为新的段落。

示例

下面我们来看一个完整的示例，演示如何使用innerHTML属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery innerHTML Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
         $(document).ready(function() { // 获取元素的HTML内容 let htmlContent =$ ('#myElement').html();
            console.log(htmlContent);

            // 设置元素的HTML内容
            $('#myElement').html('<p>This is a new paragraph</p>');
        });
    </script>
</head>
<body>
    <div id="myElement">
        <h1>Hello, World!</h1>
    </div>
</body>
</html>

在上面的示例中，我们首先获取了id为myElement的元素的HTML内容，并输出到控制台。然后，我们使用html()方法设置了该元素的HTML内容为一个新的段萀。当页面加载时，你将会看到原来的h1标签被替换为新的段萀。