資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 將 HTML 程式碼追加到 div 中？
為了使用 JavaScript 將 HTML 程式碼追加到 div 中，我們將使用 HTML DOM 方法和屬性。本文討論了四種不同的方法，並提供了逐步說明和完整的示例程式碼。
在本文中，我們有一個帶有 id 為 container 的 div，我們的任務是使用 JavaScript 將 HTML 程式碼追加到該 div 中。
追加 HTML 程式碼到 div 的方法
以下是使用 JavaScript 將 HTML 程式碼追加到 div 的幾種方法，我們將在本文中對這些方法進行逐步說明和完整的示例程式碼。
使用 innerHTML 屬性
為了使用 JavaScript 將 HTML 程式碼追加到 div 中，我們使用了 HTML DOM 的 innerHTML 屬性，該屬性設定元素的 HTML 內容。
- 我們建立了一個 div 容器，用於顯示追加的 HTML 程式碼。
- 我們建立了一個 按鈕，單擊該按鈕時會觸發函式 appendHTML。
- 在 appendHTML 函式中，我們使用 getElementById 選擇了 div，然後使用 innerHTML 屬性將 HTML 程式碼追加到選定的 div 中。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 innerHTML 屬性將 HTML 程式碼追加到 div 中。
<!DOCTYPE html>
<html>
<head>
<title>
Appending HTML code to a div using JavaScript
</title>
</head>
<body>
<h3>
To Append HTML Code to a div Using JavaScript
</h3>
<p>
In this example we have used <strong>innerHTML
</strong> to append HTML code to a div using
javascript.
</p>
<h4>
Click the button below to add HTML code to div.
</h4>
<div id='container'></div>
<button onclick="appendHtml()">Click Me</button>
<script>
function appendHtml() {
let txt = document.getElementById('container');
txt.innerHTML='<p>This is some HTML code</p>';
}
</script>
</body>
</html>
使用 appendChild 方法
在這種使用 JavaScript 將 HTML 程式碼追加到 div 的方法中，我們使用了 HTML DOM 元素 appendChild() 方法，該方法追加節點。在我們的示例中，它將一個 div 元素追加到 div 容器中。
- 我們建立了一個 div 容器，用於顯示追加的 HTML 程式碼。
- 我們建立了一個按鈕，單擊該按鈕時會觸發函式 appendHTML。
- 在 appendHTML 函式中，我們使用 createElement() 方法建立了一個新的 div 元素，然後使用 textContent 屬性將文字新增到新建立的 div 中。
- 最後，我們使用 appendChild() 方法將新建立的 div 追加到 div 容器中。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 appendChild() 方法將 HTML 程式碼追加到 div 中。
<html>
<head>
<title>
Appending HTML code to a div using JavaScript
</title>
</head>
<body>
<h3>
To Append HTML Code to a div Using JavaScript
</h3>
<p>
In this example we have used <strong>appendChild()
</strong> method to append HTML code to a div using
javascript.
</p>
<button onclick="appendHTML()">Click Me</button>
<div id="container">This is a paragraph using HTML.</div>
<script>
function appendHTML() {
let txt = document.getElementById('container');
let newEle = document.createElement('div');
newEle.textContent = 'Added using Javascript';
txt.appendChild(newEle);
}
</script>
</body>
</html>
使用 insertAdjacentHTML 方法
在這種方法中，我們使用了 HTML DOM 元素 insertAdjacentHTML() 方法將 HTML 程式碼追加到 div 中。它將 HTML 程式碼插入 HTML 文件中的任何指定位置。
- 我們建立了一個 div 容器，用於顯示追加的 HTML 程式碼。
- 我們建立了一個按鈕，單擊該按鈕時會觸發函式 appendHTML。
- 在 appendHTML 函式中，我們使用 getElementById 選擇了 div。然後，我們使用了 insertAdjacentHTML 方法，該方法接受兩個引數，即 beforeend 和我們要追加到 div 容器中的 div 元素。
- beforeend 定義了 div 元素在 div 容器中追加的位置。它將 div 元素追加到 div 容器的結束標籤之前。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 insertAdjacentHTML() 方法將 HTML 程式碼追加到 div 中。
<html>
<head>
<title>
Appending HTML code to a div using JavaScript
</title>
</head>
<body>
<h3>
To Append HTML Code to a div Using JavaScript
</h3>
<p>
In this example we have used <strong>insertAdjacentHTML()
</strong> method to append HTML code to a div using
javascript.
</p>
<button onclick="appendHTML()">Click Me</button>
<div id="container">This is a paragraph using HTML.</div>
<script>
function appendHTML() {
document.getElementById('container')
.insertAdjacentHTML('beforeend',
'<div>This is a new paragraph using Javascript.</div>');
}
</script>
</body>
</html>
使用 append 方法
在這種使用 JavaScript 將 HTML 程式碼追加到 div 的方法中，我們使用了 append() 方法。
- 我們建立了一個 div 容器，用於顯示追加的 HTML 程式碼。
- 我們建立了一個按鈕，單擊該按鈕時會觸發函式 appendHTML。
- 在 appendHTML 函式中，我們使用 createElement() 方法建立了一個新的 div 元素，然後使用 textContent 屬性將文字新增到新建立的 div 中。
- 最後，我們使用 append() 方法將新建立的 div 追加到 div 容器中。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 append() 方法將 HTML 程式碼追加到 div 中。
<html>
<head>
<title>
Appending HTML code to a div using JavaScript
</title>
</head>
<body>
<h3>
To Append HTML Code to a div Using JavaScript
</h3>
<p>
In this example we have used <strong>append()
</strong> method to append HTML code to a div using
javascript.
</p>
<button onclick="appendHTML()">Click Me</button>
<div id="container">This is a paragraph using HTML.</div>
<script>
function appendHTML() {
let txt = document.getElementById('container');
let newEle = document.createElement('div');
newEle.textContent = 'Added using Javascript';
txt.append(newEle);
}
</script>
</body>
</html>
結論
在本文中，我們瞭解瞭如何使用 JavaScript 使用四種不同的方法將 HTML 程式碼追加到 div 中。這四種不同的方法包括：innerHTML 屬性、appendChild 方法、insertAdjacentHTML 方法和 append() 方法。
18K+ 瀏覽量
