在 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. 我尝试转义字符，但它不起作用。有没有我写错的部分？

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>