.html() 是否有香草 Javascript 替代品？答案

【问题标题】：Is there a vanilla Javascript alternative for .html()?.html() 是否有香草 Javascript 替代品？
【发布时间】：2021-01-01 21:41:58
【问题描述】：

我想创建与<noscript> 相反的效果。如果未启用 Javascript，我根本不希望加载内容，这就是我对 display:none 替代方案不感兴趣的原因，它仍然会加载但只是隐藏。

我遇到了this previous answer，它具有所需的效果（请参阅更新的答案）。

HTML：

<div id="container"></div>
<script type="text/html" id="content">
    <div class="test">HTML goes here</div>
</script>

jQuery:

$(document).ready(function() {
    $('#container').html($('#content').html());
});

无论如何我可以用 Vanilla Javascript 做到这一点吗？我希望 script 的内容呈现为功能性 HTML。

【问题讨论】：

是的 - .innerHTML
有innerHTML，虽然它有一些大的安全问题。所以一定要对XSS attacks做点什么。

标签： javascript html noscript

【解决方案1】：

通常所做的是将您的 html 设置为：

<html class="no-js">
<head>
  <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js');})</script>

  <!-- ... -->

</head>

<!-- ... -->

<div class="js-only">I only show up when js is enabled</div>

<!-- ... -->

</html>

然后有一些隐藏该元素的css

.no-js .js-only {
    display: none;
}

javascript 将 <html> 元素中的 js 替换为 no-js，这导致 div 仅在启用 js 时才显示

【讨论】：