Question

您好，我是HTML和JS的新手，因此想请求一些帮助。在这里，我想根据if语句是true还是false显示两个不同的HTML元素。但是，它不起作用。我可以得到一些帮助吗？（：

extend

Answer 1

使用jQuery你会做这样的事情

<强> HTML

<!DOCTYPE html>
<html>
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
   <body>
   </body>
</html>

<强> JS

if(!user){
   $('body').append('<h1>There is no user</h1>')
} else if(user) {
   $('body').append('<button>Login</button>')
}

See js fiddle here

另外，请注意，如果要使用jquery，请在头部包含脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 2

很遗憾，您无法直接在javascript块中添加HTML。相反，你可以使用jQuery来附加一个HTML块。

为此，您可以通过将此行添加到头标记

来加载jQuery

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

然后用以下内容替换你的内联javascript：

<script>
if (!user) {
  $(document.body).append( "<h1> there is no user </h1>" );
}


if (user) {
  $(document.body).append( "<button type='button'>Click Me!</button>" );
} </script>

Answer 3

这是一个原生的Javascript替代方案

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>

<script>

    var el = document.getElementById('content');
    var content;

    if  (!user) {
        content = '<h1>there is no user</h1>';
    }
    if  (user) {
        content = '<button type="button">Click Me!</button>';
    }

    el.insertAdjacentHTML('afterbegin', content);

</script>
</body>
</html>

除非定义user变量，否则不会按原样运行，但我假设您已经在运行时将其提供。

如果您在此div中有更多html，则可以使用不同的插入位置，请参阅此处的相关文档：https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

如何在if语句中显示不同的HTML元素

3 个答案: