问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

您好，我是 HTML 和 JS 的新手，因此想寻求一些帮助。这里我想根据 if 语句是真还是假来显示两个不同的 HTML 元素。但是，它不起作用。我能得到一些帮助吗？ (:

 <!DOCTYPE html>
<html>
<body>

<script>
if (!user) {
    <h1> there is no user </h1>
} </script>

if (user) {
    <button type="button">Click Me!</button>
} </script>

</body>
</html>

原文由 Kasparas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlif-statementejs
阅读 829
1 个回答
得票最新
社区维基
1

这是一个原生的 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

原文由 William Busby 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题