使用 Javascript 修改 HTML 内容

当开发网页应用时，经常需要使用 JavaScript 来动态修改 HTML 内容。通过 JavaScript，我们可以实现添加、删除、修改元素的文本和属性，以及响应用户的交互事件。本文将介绍如何使用 JavaScript 修改 HTML 内容。

获取元素

首先，我们需要获取要修改的元素对象。可以通过以下方法获取元素对象：

• getElementById('elementId')：根据元素的 id 属性获取元素对象。
• getElementsByClassName('className')：根据元素的 class 属性获取元素对象数组。
• getElementsByTagName('tagName')：根据元素的标签名获取元素对象数组。
• querySelector('selector')：根据 CSS 选择器获取第一个匹配的元素对象。
• querySelectorAll('selector')：根据 CSS 选择器获取所有匹配的元素对象数组。

// 获取元素对象
const element = document.getElementById('elementId');

修改文本内容

一旦我们获取了要修改的元素对象，就可以通过修改其 textContent 或 innerHTML 属性来改变元素的文本内容。

// 修改元素的文本内容
element.textContent = '新的文本内容';

// 修改元素的 HTML 内容
element.innerHTML = '<strong>加粗</strong>文本';

修改属性

可以通过修改元素的属性来改变元素的外观或行为。通过修改 element.attribute 来修改属性。

// 修改元素的属性
element.setAttribute('attributeName', 'attributeValue');

创建新元素

使用 createElement('tagName') 方法来创建新的 HTML 元素对象。然后可以使用 appendChild(element) 或 insertBefore(newElement, referenceElement) 方法将新元素添加到现有的元素中。

// 创建新元素
const newElement = document.createElement('div');

// 将新元素添加到现有的元素中
existingElement.appendChild(newElement);

删除元素

使用 remove() 方法可以从文档中删除一个元素。

// 删除元素
element.remove();

事件监听

可以使用事件监听器来响应用户的交互事件，比如点击、鼠标移动等。可以使用 addEventListener(eventName, callback) 方法为元素添加事件监听器。

// 添加点击事件监听器
element.addEventListener('click', function() {
  // 响应点击事件的逻辑
});

以上就是使用 JavaScript 修改 HTML 内容的基础知识。通过掌握这些技巧，你可以在网页应用中动态地修改 HTML 内容，实现更加丰富和交互性的用户界面。