使用 JavaScript 將 HTML 新增到 div 中
要從 JavaScript 建立 div 元素，你必須操作 DOM。最常用和首選的方式取決於建立 div 元素的 createElement() 方法。
我們還可以在建立的 div 元素中宣告必要的其他元素。一種較少實踐的方法是 insertAdjacentHTML()，Firefox 和 Safari 通常不支援這種方法。
在以下示例中，我們將看到這兩種方法的使用。例項將在具有特定 id 的 main 元素下建立一個 div 元素。
在 HTML 中使用 createElement() 方法新增 div
在這裡，我們將首先建立一個 button 元素來觸發一個建立新元素的函式。我們還將為要新增到此段的新 div 元素設定 main 元素和 id=content。
在我們的 JavaScript 行中，我們將為 div 元素建立一個例項，該例項將啟動 createElement('div') 為該例項設定一個值。在 innerHTML 中，我們還將定義一個命令，以確保我們的 div 在函式呼叫時建立。
程式碼片段 - HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<button onclick="add()">Make div</button>
<main id="content"></main>
</body>
</html>
程式碼片段 - JavaScript：
function add() {
const div = document.createElement('div');
div.innerHTML = 'new div';
document.getElementById('content').appendChild(div);
}
輸出：
%60-Method-to-Add-%60div%60-in-HTML.webp)
每次單擊按鈕，都會建立一個新的 div 元素，其內容為 new div。需要密切注意的是 div 元素維護父元素和子元素的層次結構。
由於新的 div 元素是 main 元素的子元素，因此 appenChild() 方法正在執行。
使用 insertAdjacentHTML() 方法新增 div 元素
insertAdjacentHTML() 指的是新增子 div 元素的特定位置和正確格式。在這種情況下，我們有這個 afterbegin 引數，它在開始後立即建立一個 div，也就是第一個孩子。
這個迴圈將繼續，直到它滿足任何中斷條件。
程式碼片段 - HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<button onclick="add()">Make div</button>
<main id="content"></main>
</body>
</html>
程式碼片段 - JavaScript：
function add() {
document.querySelector('#content')
.insertAdjacentHTML('afterbegin', `<div class="row">
<input type="text" name="name" value="Generated div" />
</div>`)
}
輸出：
%60-Method-to-Add-%60div%60-Element.webp)
可以看出，在 afterbegin 引數之後，我們明確地建立了 div 元素。每次按下按鈕都會相對於前一個 div 元素建立一個新的 div 元素。
這個方法類似，被定義為可以正常執行，但是一些主流瀏覽器並沒有修改來處理它。
