使用 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);
}
輸出:
每次單擊按鈕,都會建立一個新的 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>`
)
}
輸出:
可以看出,在 afterbegin
引數之後,我們明確地建立了 div
元素。每次按下按鈕都會相對於前一個 div
元素建立一個新的 div
元素。
這個方法類似,被定義為可以正常執行,但是一些主流瀏覽器並沒有修改來處理它。