如何使用 JavaScript 添加、删除和修改 HTML 元素?
主题
Web APIJavaScriptHTML
在GitHub上编辑
TL;DR
要使用 JavaScript 添加、删除和修改 HTML 元素,可以使用 createElement
、appendChild
、removeChild
等方法以及 innerHTML
和 textContent
等属性。例如,要添加一个元素,可以使用 document.createElement
创建它,然后使用 appendChild
将其附加到父元素。要删除一个元素,可以在其父元素上使用 removeChild
。要修改一个元素,可以更改其 innerHTML
或 textContent
。
// Adding an elementconst newElement = document.createElement('div');newElement.textContent = 'Hello, World!';document.body.appendChild(newElement);// Removing an elementconst elementToRemove = document.getElementById('elementId');elementToRemove.parentNode.removeChild(elementToRemove);// Modifying an elementconst elementToModify = document.getElementById('elementId');elementToModify.innerHTML = 'New Content';
使用 JavaScript 添加、删除和修改 HTML 元素
添加元素
要添加 HTML 元素,可以使用 document.createElement
方法创建一个新元素,然后使用 appendChild
将其附加到父元素。
// Create a new div elementconst newDiv = document.createElement('div');// Set its contentnewDiv.textContent = 'Hello, World!';// Append the new element to the bodydocument.body.appendChild(newDiv);// See the changed document by running the codeconsole.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 removedconst elementToRemove = document.getElementById('elementId');// Remove the elementelementToRemove.parentNode.removeChild(elementToRemove);
或者,您可以在该元素上直接使用 remove
方法。
const elementToRemove = document.getElementById('elementId');elementToRemove.remove();
修改元素
要修改 HTML 元素,您可以更改其属性,例如 innerHTML
、textContent
或属性。
const elementToModify = document.createElement('div');// Change its inner HTMLelementToModify.innerHTML = 'New Content';// Change its text contentelementToModify.textContent = 'New Text Content';// Change an attributeelementToModify.setAttribute('class', 'new-class');console.log(elementToModify);
您还可以使用 classList.add
、classList.remove
和 classList.toggle
等方法来修改元素的类。
const element = document.getElementById('elementId');// Add a classelement.classList.add('new-class');// Remove a classelement.classList.remove('old-class');// Toggle a classelement.classList.toggle('active');