這些是一些用于修改 HTML 元素的常見方法：
1、document.createElement(element)：創(chuàng)建 HTML 元素節(jié)點?？梢允褂眠@個方法創(chuàng)建一個新的 HTML 元素，
例如 document.createElement('div') 將創(chuàng)建一個 <div> 元素節(jié)點。
2、document.createAttribute(attribute)：創(chuàng)建 HTML 屬性節(jié)點?？梢允褂眠@個方法創(chuàng)建一個新的 HTML 屬性節(jié)點，
例如 document.createAttribute('class') 將創(chuàng)建一個表示 class 屬性的屬性節(jié)點。
3、document.createTextNode(text)：創(chuàng)建 HTML 文本節(jié)點?？梢允褂眠@個方法創(chuàng)建一個包含指定文本的 HTML 文本節(jié)點，
例如 document.createTextNode('Hello, world!') 將創(chuàng)建一個包含文本 'Hello, world!' 的文本節(jié)點。
4、元素節(jié)點.removeChild(element)：刪除 HTML 元素。這個方法用于從父元素中移除指定的子元素。需要操作父元素節(jié)點調用該方法，
例如 parentElement.removeChild(childElement)。
5、元素節(jié)點.appendChild(element)：添加 HTML 元素。這個方法用于將一個元素節(jié)點作為子元素添加到另一個元素節(jié)點中。需要操作父元素節(jié)點調用該方法，
例如 parentElement.appendChild(newChildElement)。
6、元素節(jié)點.replaceChild(element)：替換 HTML 元素。這個方法用于將一個元素節(jié)點替換掉另一個元素節(jié)點。需要操作父元素節(jié)點調用該方法，
例如 parentElement.replaceChild(newElement, oldElement)。
7、元素節(jié)點.insertBefore(element)：在指定的子節(jié)點前面插入新的子節(jié)點。這個方法用于在指定子元素之前插入一個新的子元素。需要操作父元素節(jié)點調用該方法，
例如 parentElement.insertBefore(newChildElement, referenceChildElement)。
?示例:
<!DOCTYPE html>
<html>
<head>
<title>我的HTML頁面</title>
</head>
<body>
<div id="myDiv">
<p>你好，世界！</p>
</div>
<script>
// 創(chuàng)建元素節(jié)點
var newElement = document.createElement('h1');
newElement.textContent = '歡迎訪問我的網站！';
// 創(chuàng)建屬性節(jié)點
var newAttribute = document.createAttribute('class');
newAttribute.value = 'heading';
// 創(chuàng)建文本節(jié)點
var newText = document.createTextNode('這是一個段落。');
// 獲取父元素節(jié)點
var parentElement = document.getElementById('myDiv');
// 刪除子元素節(jié)點
var childElement = document.querySelector('p');
parentElement.removeChild(childElement);
// 添加子元素節(jié)點
parentElement.appendChild(newElement);
// 替換元素節(jié)點
var oldElement = document.querySelector('h1');
var replacementElement = document.createElement('h2');
replacementElement.textContent = '歡迎訪問我的更新網站！';
parentElement.replaceChild(replacementElement, oldElement);
// 在指定子節(jié)點前插入新的子節(jié)點
var referenceChild = parentElement.firstChild;
parentElement.insertBefore(newText, referenceChild);
</script>
</body>
</html>
?運行結果：文章來源：http://www.zghlxwxcb.cn/news/detail-569743.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-569743.html
到了這里，關于JavaScript--修改 HTML 元素的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
![[HTML]Web前端開發(fā)技術26（HTML5、CSS3、JavaScript ）JavaScript基礎——喵喵畫網頁](https://imgs.yssmx.com/Uploads/2024/02/828994-1.png)
![[HTML]Web前端開發(fā)技術9（HTML5、CSS3、JavaScript ）——喵喵畫網頁](https://imgs.yssmx.com/Uploads/2024/02/777294-1.png)
![[HTML]Web前端開發(fā)技術12（HTML5、CSS3、JavaScript ）——喵喵畫網頁](https://imgs.yssmx.com/Uploads/2024/02/793019-1.png)
![[JavaWeb]【一】入門JavaWeb開發(fā)總概及HTML、CSS、JavaScript](https://imgs.yssmx.com/Uploads/2024/02/652989-1.png)
![[HTML]Web前端開發(fā)技術7（HTML5、CSS3、JavaScript ）CSS的定位機制——喵喵畫網頁](https://imgs.yssmx.com/Uploads/2024/02/755631-1.png)
