如果要在網頁中添加新的 HTML 內容，有一種方法是先把 HTML 內容置于頁面中的某個元素中，然后使用 JavaScript DOM 技術，將這個元素內容轉換為 DOM 對象進行處理。

在 JavaScript 代碼中創建新節點可以使用 createElement() 方法，并且可以使用 appendChild() 方法將節點添加到文檔中。以下為一些常用的添加 DOM 元素的示例：

// 創建元素
var newDiv = document.createElement('div');
var newP = document.createElement('p');
var newText = document.createTextNode('Hello World!');
// 創建元素并添加屬性
var newImg = document.createElement('img');
newImg.src = 'images/pic.jpg';
newImg.alt = 'image';
// 添加新元素到文檔中
document.body.appendChild(newDiv);
newDiv.appendChild(newP);
newP.appendChild(newText);
// 添加新元素到指定標簽后面
var parentNode = document.getElementById('main');
var refNode = document.getElementById('para1');
parentNode.insertBefore(newDiv, refNode.nextSibling);
// 刪除元素
var oldNode = document.getElementById('myNode');
parentNode.removeChild(oldNode);

在以上示例中，我們使用 createElement() 創建新的元素，并使用 appendChild() 將它們插入到文檔中。使用 insertBefore() 方法可以將新元素插入到一個指定的元素之前，而 removeChild() 方法可以從文檔中刪除元素。

JavaScript DOM 編程中添加新節點是一項很常見的任務。了解如何添加和刪除節點可以讓你更好地理解 DOM 編程。

下面是一個完整的添加 DOM 元素的示例：

在以上示例中，我們首先創建一個新 div 元素，然后創建一個文本節點來添加文本內容。最后，我們將新元素插入到頁面中已有的一個 div 元素之前。

當我們運行以上代碼時，我們會看到一個新的 div 元素被添加到頁面中。

除了添加和刪除 DOM 元素之外，還可以使用其他方法更改元素的屬性和樣式。例如，可以使用 document.getElementById() 獲取頁面中某個元素的引用，并使用它來更改樣式。

var element = document.getElementById("myDiv");
element.style.color = "red";

以上代碼將獲取 id 為 "myDiv" 的元素，然后將它的顏色屬性更改為紅色。這不僅僅是改變渲染的顏色，也同樣改變了元素的屬性。這意味著在使用 document.getElementById() 方法來獲取元素時，可以獲取到修改后的屬性值。

JavaScript DOM 編程為開發者提供了豐富的工具和功能，以便改變頁面中的 HTML、CSS、和 JavaScript。一個全面的理解和掌握 DOM 編程將有助于更好地利用這種力量。