.html() 是不是有香草 Javascript 替代品？
Posted
技术标签:
【中文标题】.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做点什么。
【参考方案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 时才显示
【讨论】：
以上是关于.html() 是不是有香草 Javascript 替代品？的主要内容，如果未能解决你的问题，请参考以下文章