資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中動態建立新元素？
在本文中，我們將學習如何藉助 createElement 瀏覽器 API 在 JavaScript 中動態建立新元素。
JavaScript 中的動態元素建立允許您在開始時生成新的 HTML 元素。無論您需要根據使用者交互向網頁新增內容，還是為特定任務動態生成元素，它都可以幫助增強 Web 應用程式的靈活性和互動性。
讓我們透過一些示例來了解如何實現這一點。
示例 1
在本例中，我們將有一個按鈕元素，點選它後，我們將生成一個新的“p”元素並將其附加到 DOM 中。
檔名：index.html
<html lang="en">
<head>
<title>How to dynamically create new elements in JavaScript?</title>
</head>
<body>
<h3>How to dynamically create new elements in JavaScript?</h3>
<div id="container">
<!-- Newly created elements will be appended here -->
</div>
<button onclick="createNewElement()">Create Element</button>
<script>
function createNewElement() {
// Create a new paragraph element
var newParagraph = document.createElement('p');
// Set the text content of the paragraph
newParagraph.textContent = 'This is a dynamically created paragraph.';
// Append the paragraph to the container div
var container = document.getElementById('container');
container.appendChild(newParagraph);
}
</script>
</body>
</html>
示例 2
在本例中，我們將遵循上述程式碼結構，並使用 insertAdjacentHTML、cloneNode、appendChild 和 document.write 四種不同的方法動態建立新元素。在這裡，使用了不同的方法和概念來在 JavaScript 中動態建立新元素。
檔名：index.html
<html lang="en">
<head>
<title>How to dynamically create new elements in JavaScript?</title>
</head>
<body>
<h3>How to dynamically create new elements in JavaScript?</h3>
<div id="container">
<!-- Newly created elements will be appended here -->
</div>
<div id="original">Original content</div>
<button onclick="createNewElement()">Create Element using insertAdjacentHTML</button>
<button onclick="createNewElementCloneNode()">Create Element using cloneNode</button>
<button onclick="createNewElementAppend()">Create Element using appendChild</button>
<button onclick="createNewElementWrite()">Create Element using document.write</button>
<script>
function createNewElement() {
// Example 1: Using insertAdjacentHTML method to add dynamic content
var container = document.getElementById('container');
container.insertAdjacentHTML('beforeend', '<p>This is a dynamically created paragraph using insertAdjacentHTML.</p>');
}
function createNewElementCloneNode() {
// Example 2: Using cloneNode method to add dynamic content
var originalElement = document.getElementById('original');
var clonedElement = originalElement.cloneNode(true);
container.appendChild(clonedElement);
}
function createNewElementAppend() {
// Example 3: Using appendChild() method to add dynamic content
var newDiv = document.createElement('div');
newDiv.textContent = 'This is a dynamically created div using appendChild.';
container.appendChild(newDiv);
}
function createNewElementWrite() {
// Example 4: Using document.write Method to add dynamic content
document.write('<p>This is a dynamically created paragraph using document.write.</p>');
}
</script>
</body>
</html>
結論
總之，在 JavaScript 中動態建立元素為建立互動式和動態 Web 應用程式提供了廣泛的可能性。透過利用 JavaScript 的 createElement()、appendChild()、document.write、cloneNode 和 insertAdjacentHTML 方法，我們學習瞭如何在網頁上動態建立新元素。
更新於： 2023年8月3日
2K+ 閱讀量
廣告