数据结构
网络
关系数据库管理系统 (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+ 浏览量
