更改 HTML 元素 - HTML

在 Web 开发中，HTML 元素是页面的构建块。通过更改 HTML 元素，我们可以为页面添加、更新或删除内容以及设置样式。在本文中，我们将学习如何使用 JavaScript 和 jQuery 来更改 HTML 元素。

使用 JavaScript 更改 HTML 元素

JavaScript 是一种用于在 Web 页面中添加交互性和动态性的脚本语言。通过使用它，我们可以轻松地更改 HTML 元素和样式。下面是一些使用 JavaScript 更改 HTML 元素的示例：

获取元素

要更改 HTML 元素，我们首先需要获取它。我们可以使用 document.getElementById() 方法来获取具有特定 ID 的元素。

例如，以下代码将获取 ID 为 "my-element" 的元素：

let myElement = document.getElementById("my-element");

更改元素的文本内容

可以使用 innerHTML 属性来更改元素的文本内容。例如，要将段落元素的文本内容更改为 "Hello world!"，可以使用以下代码：

let myParagraph = document.getElementById("my-paragraph");
myParagraph.innerHTML = "Hello world!";

更改元素的样式

可以使用 style 属性来更改元素的样式。例如，要更改元素的背景颜色和字体颜色，可以使用以下代码：

let myElement = document.getElementById("my-element");
myElement.style.backgroundColor = "red";
myElement.style.color = "white";

使用 jQuery 更改 HTML 元素

jQuery 是一个流行的 JavaScript 库，可帮助简化 DOM 操作。下面是一些使用 jQuery 更改 HTML 元素的示例：

获取元素

可以使用 $() 函数来获取具有特定 ID 的元素。

例如，以下代码将获取 ID 为 "my-element" 的元素：

let myElement = $("#my-element");

更改元素的文本内容

可以使用 text() 方法来更改元素的文本内容。例如，要将段落元素的文本内容更改为 "Hello world!"，可以使用以下代码：

let myParagraph = $("#my-paragraph");
myParagraph.text("Hello world!");

更改元素的样式

可以使用 css() 方法来更改元素的样式。例如，要更改元素的背景颜色和字体颜色，可以使用以下代码：

let myElement = $("#my-element");
myElement.css("background-color", "red");
myElement.css("color", "white");

通过了解如何使用 JavaScript 和 jQuery 更改 HTML 元素，您可以创建更具交互性和动态性的 Web 页面。