HTML 如何有条件地渲染普通的HTML元素

在本文中，我们将介绍如何在HTML中有条件地渲染普通的HTML元素，例如 <div>。

阅读更多：HTML 教程

条件渲染

在开发Web应用程序时，我们有时需要根据特定的条件来呈现不同的内容或组件。在HTML中，我们可以使用条件语句来实现这一目的。条件渲染是一种根据条件来确定是否呈现某个元素的过程。

使用if语句进行条件渲染

在HTML中，我们可以使用if语句来进行条件渲染。通过使用JavaScript，我们可以根据特定的条件来动态地添加或删除HTML元素。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>条件渲染示例</title>
  <script>
    function renderDiv() {
      if (condition) {
        var div = document.createElement('div');
        div.innerHTML = '条件为真时呈现的内容';
        document.body.appendChild(div);
      }
    }
  </script>
</head>
<body>
  <button onclick="renderDiv()">点击渲染</button>
</body>
</html>

在上面的示例中，我们首先定义了一个名为renderDiv的JavaScript函数。在函数中，我们使用if语句判断条件是否为真。如果条件为真，我们创建一个新的div元素，并设置其内容为”条件为真时呈现的内容”。最后，我们将该div元素添加到文档的主体中。

请注意，这只是一个简单的示例，您可以根据自己的需求使用更复杂的条件来动态渲染HTML元素。

使用三元运算符进行条件渲染

除了使用if语句外，我们还可以使用三元运算符来进行条件渲染。三元运算符是一种简洁的条件语句，它根据条件的真假来决定返回的值。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>条件渲染示例</title>
  <script>
    function renderDiv() {
      var condition = true;
      var content = condition ? '条件为真时呈现的内容' : '条件为假时呈现的内容';

      var div = document.createElement('div');
      div.innerHTML = content;
      document.body.appendChild(div);
    }
  </script>
</head>
<body>
  <button onclick="renderDiv()">点击渲染</button>
</body>
</html>

在上面的示例中，我们首先定义了一个名为renderDiv的JavaScript函数。在函数中，我们使用三元运算符根据条件的真假来确定要呈现的内容。如果条件为真，我们将内容设置为”条件为真时呈现的内容”，否则设置为”条件为假时呈现的内容”。最后，我们将内容添加到新创建的div元素中，并将其添加到文档的主体中。

使用三元运算符可以使代码更加简洁且易读，尤其是当条件简单且返回的内容相对较少时。