資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 JavaScript 返回 HTML 或構建 HTML？
在構建 Web 應用程式時，通常需要在客戶端動態生成HTML。這可以使用 JavaScript 完成，並且有多種方法可以實現。在本文中，我們將向您展示如何使用 JavaScript 返回HTML或構建 HTML。
從函式返回 HTML
一種動態生成HTML的方法是從函式返回 HTML 字串。例如，假設我們有一個生成列表項的函式：
function generateListItem(text) {
return '<li>' + text + '</li>';
}然後，我們可以使用此函式生成 HTML：
function generateListItem(text) {
return '<li>' + text + '</li>';
}
var list = '<ul>';
list += generateListItem('Item 1');
list += generateListItem('Item 2');
list += generateListItem('Item 3');
list += '</ul>';
console.log(list)list 變數現在包含以下 HTML：
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
使用 DOM 方法構建 HTML
另一種動態生成HTML的方法是使用DOM方法構建 HTML 結構。這可以透過建立元素然後將它們新增到 DOM 來完成。例如，假設我們想要建立一個與之前相同的專案列表：
var list = document.createElement('ul');
var item1 = document.createElement('li');
item1.innerText = 'Item 1';
list.appendChild(item1);
var item2 = document.createElement('li');
item2.innerText = 'Item 2';
list.appendChild(item2);
var item3 = document.createElement('li');
item3.innerText = 'Item 3';
list.appendChild(item3);list 變數現在包含以下 HTML：
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
示例
在下面的示例中，我們使用不同的 DOM 方法構建 HTML 列表。
<!DOCTYPE html>
<html>
<body>
<h2> Building HML using DOM methods</h2>
<div id="parent">
<p> We create a list by generating HTML elements</p>
<h4 id="child">Tutorials List</h4>
</div>
<div id="result"></div>
<script>
var list = document.createElement('ul');
var item1 = document.createElement('li');
item1.innerText = 'JavaScript';
list.appendChild(item1);
var item2 = document.createElement('li');
item2.innerText = 'Python';
list.appendChild(item2);
var item3 = document.createElement('li');
item3.innerText = 'Rupy';
list.appendChild(item3);
document.getElementById("result").appendChild(list)
</script>
</body>
</html>在上面的程式中，我們使用 createElement 方法建立了一個無序列表和列表項。appendChild 方法用於將列表項新增到列表中。
使用 innerHTML 構建 HTML
另一種構建 HTML 的方法是使用 innerHTML 屬性。這可以透過建立一個元素，然後將其 innerHTML 屬性設定為 HTML 字串來完成。例如，假設我們想要建立一個與之前相同的專案列表：
var list = document.createElement('ul');
list.innerHTML = '<li>Item 1</li><li>Item 2</li><li>Item 3</li>';list 變數現在包含以下 HTML：
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
示例
在下面的示例中，我們透過將列表分配給 innerHTML 來構建 HTML 列表。
<!DOCTYPE html>
<html>
<body>
<div id="result"> List </div>
<script>
var list = document.createElement('ul');
list.innerHTML = '<li>Item 1</li><li>Item 2</li><li>Item 3</li>';
document.getElementById("result").appendChild(list)
</script>
</body>
</html>在上面的程式中，我們使用 *createElement* 方法建立了一個列表。列表項使用 *innerHTML* 新增到列表中。為了顯示列表，我們使用 *appendChild* 方法將帶有 id="result" 的 <div> 元素附加。
結論
在本教程中，我們演示瞭如何使用 JavaScript 返回 HTML 或構建 HTML。有多種方法可以實現，您選擇的方法將取決於您的需求。
17K+ 瀏覽量
