資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 清空 div 的內容？
我們將學習如何使用 JavaScript 刪除 div 元素的所有子元素或內容。但是，無論我們學習哪種清空 div 元素內容的方法，都適用於任何 HTML 元素。
刪除 div 元素的內容在使用者希望根據特定條件顯示某些 HTML 內容或希望替換 HTML 內容時非常有用。
在這裡，我們將探討三種使用 JavaScript 清空 div 內容的方法。
使用 replaceChildren() 方法
replaceChilderen() 方法允許開發人員替換特定 HTML 元素的子元素。因此，我們可以在 JavaScript 中建立新的子元素，並將它們作為 replaceChildren() 方法的引數傳遞，以替換 div 的內容。
如果我們將 div 元素的內容替換為空字串，則可以清空 div 元素的內容。因此，我們將呼叫 replaceChildren() 方法，而不傳遞任何 HTML 元素作為引數。
語法
使用者可以按照以下語法使用 replaceChildren() 方法。
div.replaceChildren();
在上面的語法中，div 是我們想要清空 HTML 內容的 HTML 元素。
示例
在下面的示例中，我們建立了 div 元素並添加了一些 HTML 內容。之後，當用戶按下按鈕時，我們將呼叫 clearDiv() 函式。clearDiv() 函式使用 id 訪問 div 元素。它透過獲取 div 元素作為引用來呼叫 replaceChildren() 方法，以清除 div 元素的所有內容。
<html>
<head>
<style>
div {
font-size: 2rem;
height: 100px;
width: 600px;
border-radius: 20px;
padding: 20px;
border:1px solid black
}
</style>
</head>
<body>
<h2>Using the <i>replaceChildren()</i> method to clear the div element using JavaScript</h2>
<div id = "divElement">
Hello Users! <br> How are you?
</div><br>
<button onclick="clearDiv()">Clear all content of div</button>
<script>
let output = document.getElementById('output');
function clearDiv() {
// access the div element and use the replaceChildren() method to clear the div content
let div = document.getElementById("divElement");
div.replaceChildren();
}
</script>
</body>
</html>
使用 HTML 元素的 removeChild() 方法和 firstChild() 屬性
removeChild() 方法允許在 JavaScript 中刪除特定 HTML 元素的子元素。此外，我們將使用 HTML 元素的 firstChild 屬性來檢查 HTML 元素是否包含任何子元素。
我們將呼叫一個 while 迴圈，直到 HTML 元素 firstChild 元素屬性包含某些值，並且我們將在 while 迴圈中使用 removeChild() 方法刪除第一個子元素。
語法
使用者可以按照以下語法使用 firstChild 屬性和 removeChild() 方法來清除 div 元素的所有內容。
while (divElement.firstChild) {
divElement.removeChild(divElement.firstChild);
}
在上面的語法中，divElement 是要清除內容的目標 HTML div 元素。
示例
在下面的示例中，div 元素包含三個帶有 <p> 標記的元素，它們是 div 元素的子元素。
下面的示例在使用者單擊按鈕時呼叫 removeChild() 函式。在 removeChild() 函式中，我們已訪問了 div 元素。之後，我們使用了 while 迴圈、firstChild 屬性和 removeChild() 方法，如上文語法所示，以清除子元素的內容。
<html>
<head>
<style>
div {
font-size: 1rem;
height: 120px;
width: 600px;
padding: 20px;
border: 1px solid black
}
</style>
</head>
<body>
<h3>Using the removeChild() method and firstChild property of HTML element to clear the div element using JavaScript </h3>
<div id = "divElement">
<p>This is a first child element of Div!</p>
<p>This is a second child element of Div!</p>
<p>This is a third child element of Div!</p>
</div><br>
<button onclick = "removeContent()"> Remove Content </button>
<script>
let output = document.getElementById('output');
function removeContent() {
let divElement = document.getElementById("divElement");
while (divElement.firstChild) {
divElement.removeChild(divElement.firstChild);
}
}
</script>
</body>
</html>
使用 innerHTML 屬性
我們可以使用 JavaScript 透過 innerHTML 屬性替換任何 HTML 元素的 HTML。當我們將空字串分配為 innerHTML 屬性的值時，它會清除任何 HTML 元素（包括 div 元素）的所有內容。
語法
使用者可以按照以下語法使用 innerHTML 屬性來清除 div 元素的內容。
element.innerHTML = "";
示例
在下面的示例中，div 元素僅包含文字。我們已向按鈕元素添加了 click 事件監聽器。因此，當用戶單擊按鈕時，它將呼叫一個回撥函式，該函式將使用 innerHTML 屬性清除 div 元素的內容。
<html>
<head>
<style>
div {
font-size: 1rem;
background-color: lightgreen;
color: darkblue;
height: 100px;
width: 600px;
}
</style>
</head>
<body>
<h2>Using the <i>inerHTML property</i> to clear the div element usingJavaScript</h2>
<div id = "divElement">
This is a sample div element.
</div><br>
<button id = "clearButton"> Remove Content </button>
<script>
let output = document.getElementById('output');
let button = document.getElementById('clearButton');
button.addEventListener('click', () => {
let element = document.querySelector('div');
element.innerHTML = "";
})
</script>
</body>
</html>
在本教程中，使用者學習瞭如何使用各種方法和元素來清除 div 元素的內容。最簡單快捷的方法是使用 innerHTML 屬性。
14K+ 閱讀量
