测验

如何使用 JavaScript 添加、删除和修改 HTML 元素?

主题
Web APIJavaScriptHTML
在GitHub上编辑

TL;DR

要使用 JavaScript 添加、删除和修改 HTML 元素,可以使用 createElementappendChildremoveChild 等方法以及 innerHTMLtextContent 等属性。例如,要添加一个元素,可以使用 document.createElement 创建它,然后使用 appendChild 将其附加到父元素。要删除一个元素,可以在其父元素上使用 removeChild。要修改一个元素,可以更改其 innerHTMLtextContent

// Adding an element
const newElement = document.createElement('div');
newElement.textContent = 'Hello, World!';
document.body.appendChild(newElement);
// Removing an element
const elementToRemove = document.getElementById('elementId');
elementToRemove.parentNode.removeChild(elementToRemove);
// Modifying an element
const elementToModify = document.getElementById('elementId');
elementToModify.innerHTML = 'New Content';

使用 JavaScript 添加、删除和修改 HTML 元素

添加元素

要添加 HTML 元素,可以使用 document.createElement 方法创建一个新元素,然后使用 appendChild 将其附加到父元素。

// Create a new div element
const newDiv = document.createElement('div');
// Set its content
newDiv.textContent = 'Hello, World!';
// Append the new element to the body
document.body.appendChild(newDiv);
// See the changed document by running the code
console.log(document.body);

您还可以使用 insertBefore 在现有子元素之前插入新元素。

const parentElement = document.getElementById('parent');
const newElement = document.createElement('p');
newElement.textContent = 'Inserted Paragraph';
const referenceElement = document.getElementById('reference');
parentElement.insertBefore(newElement, referenceElement);

删除元素

要删除 HTML 元素,可以在其父元素上使用 removeChild 方法。

// Select the element to be removed
const elementToRemove = document.getElementById('elementId');
// Remove the element
elementToRemove.parentNode.removeChild(elementToRemove);

或者,您可以在该元素上直接使用 remove 方法。

const elementToRemove = document.getElementById('elementId');
elementToRemove.remove();

修改元素

要修改 HTML 元素,您可以更改其属性,例如 innerHTMLtextContent 或属性。

const elementToModify = document.createElement('div');
// Change its inner HTML
elementToModify.innerHTML = 'New Content';
// Change its text content
elementToModify.textContent = 'New Text Content';
// Change an attribute
elementToModify.setAttribute('class', 'new-class');
console.log(elementToModify);

您还可以使用 classList.addclassList.removeclassList.toggle 等方法来修改元素的类。

const element = document.getElementById('elementId');
// Add a class
element.classList.add('new-class');
// Remove a class
element.classList.remove('old-class');
// Toggle a class
element.classList.toggle('active');

延伸阅读

在GitHub上编辑