javascript - 在 JavaScript 中创建 DOM 对象

Question

<div class="comments"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    const darkModeMeidaQuery = window.matchMedia('(prefers-color-scheme: dark)');

    function updateForDarkModeChange() {
        if (darkModeMeidaQuery.matches) {
            var colorScheme = 'dark'
        } else {
            var colorScheme = 'light'
        }
        $('.comments').append('<script src="https://utteranc.es/client.js" repo="user/repo-name" issue-term="pathname" theme="github-'+colorScheme+'" crossorigin="anonymous" async><\/script>');
    }

    darkModeMeidaQuery.addListener(updateForDarkModeChange);
    updateForDarkModeChange();
</script>

我正在尝试加载话语以将浏览器主题与上述脚本匹配。但是，该对象是正常创建的，但它抛出：Uncaught Error: "issue-term" or "issue-number" must be specified. 我尝试转义字符，但它不起作用。有没有我写错的部分？

标签： javascript

Answer 1

不错的工作！大多数新用户不包含您已经完成的最小可重现示例！

如有疑问，请始终咨询问题跟踪器。你没有做错任何事，但是 jQuery 正在清除你的属性。

按照问题评论中的说明进行操作：

<div id="comments"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    const darkModeMeidaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const comments = document.getElementById('comments');
 
    function updateForDarkModeChange() {
        if (darkModeMeidaQuery.matches) {
            var colorScheme = 'dark'
        } else {
            var colorScheme = 'light'
        }
 
        var script = document.createElement('script');
        script.src = 'https://utteranc.es/client.js';
        script.setAttribute('repo', 'ergo9ine/sfdb_tracker');
        script.setAttribute('issue-term', 1);
        script.setAttribute('theme', 'github-dark');
        script.setAttribute('crossorigin', 'anonymous');
        comments.appendChild(script)
    }

    darkModeMeidaQuery.addListener(updateForDarkModeChange);
    updateForDarkModeChange();
</script>