如何通过URL参数将内容插入指定div？无参数时切换至其他div

我来帮你完善这个选择加入页面的订阅数据展示功能～

你的核心思路没问题，我帮你把代码补全并做了优化，让逻辑更可靠、体验更友好：

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
    <title>订阅状态展示</title>
    <style>
        .subscription-status {
            padding: 1rem;
            margin-bottom: 1rem;
            border-radius: 4px;
        }
        #subscribed {
            background-color: #e8f5e9;
            color: #2e7d32;
        }
        #unsubscribed {
            background-color: #fff3e0;
            color: #ef6c00;
        }
    </style>
    <script type="text/javascript">
        // 确保DOM加载完成后再执行操作，避免找不到元素
        window.addEventListener('DOMContentLoaded', function() {
            // 模拟订阅数据，实际项目中可替换为后端接口返回的真实数据
            const subscribedContent = '<span>您当前的订阅：科技周刊 + 行业深度月报</span>';
            const unsubscribedContent = '<span>您还未订阅任何内容，点击下方按钮加入我们吧！</span>';

            // 用更可靠的方式获取URL参数，替代正则匹配
            const urlParams = new URLSearchParams(window.location.search);
            const isSubscribed = urlParams.has('testnews') && urlParams.get('testnews') === '1';

            if (isSubscribed) {
                document.getElementById('subscribed').innerHTML = subscribedContent;
            } else {
                document.getElementById('unsubscribed').innerHTML = unsubscribedContent;
            }
        });
    </script>
</head>
<body>
    <!-- 已订阅状态容器 -->
    <div id="subscribed" class="subscription-status"></div>
    <!-- 未订阅状态容器 -->
    <div id="unsubscribed" class="subscription-status"></div>

    <!-- 订阅操作按钮示例 -->
    <button onclick="window.location.href = window.location.pathname + '?testnews=1'">立即订阅</button>
    <button onclick="window.location.href = window.location.pathname">取消订阅状态</button>
</body>
</html>

关键优化说明 #

• 更可靠的参数判断：用URLSearchParamsAPI替代正则匹配，即使URL里有其他参数（比如?foo=bar&testnews=1）也能准确识别，不会出现误判。
• DOM就绪后执行：通过DOMContentLoaded事件确保页面元素加载完成后再操作，避免出现找不到div的报错。
• 状态差异化展示：给不同状态的容器加了样式区分，同时针对未订阅状态调整了提示文本，提升用户体验。

内容的提问来源于stack exchange，提问作者Chelsea