JavaScript 中存入一段 HTML 代码，运行的时候加入到 DOM 中，最佳操作是什么

使用 createContextualFragment 函数解决

var new_dom = document.createRange().createContextualFragment(`
    <div x-data="comment()"
    @addcomment.window="addComment($event.detail)"
    x-show="show"
    class="fixed bottom-0 left-0 right-0 flex justify-center">
    <div class="bg-white h-64 w-full border p-5 border-b-0 max-w-screen-md rounded-t-lg shadow-2xl">
        <div class="h-10">
            <p>
                Reply to
                <strong class="text-blue-400 uppercase" x-text="comment_owner_name"></strong>
            </p>
        </div>
        <div class="h-32">
            <textarea name="body" id="body" x-model="body"  required="required" class="w-full h-full border-t border-b focus:outline-none pt-3 pb-3" spellcheck="false"></textarea>
        </div>
        <div class="h-16 flex justify-end items-center">
            <div>
                <button @click="show = false" class="btn mr-4">
                    取消
                </button>
                <button @click="addCommentStore" type="submit" class="btn btn-purple btn-long">
                    提交
                </button>
            </div>
        </div>
    </div>
    </div>
`);



document.body.appendChild(new_dom)

做的是一个弹出模版。把HTML写到JS的代码里的好处就是哪里需要这个模版，直接引用JS就可以使用了，不需要在额外处理，或者额外加载。如果要修改，直接把HTML 拷贝到模版里改好就行。

# 引用该JS后，就能直接使用这个弹出模块了，类似于这种
x-data @click="$dispatch('addcomment')"


如果大家用的也是Tailwind+Alpine, 可以拿去直接按照自己页面修改下就能用了。

window.comment = function () {
    return {
        show: null,
        addComment(obj) {
            this.show = true
        },
        addCommentStore() {

    }
}

进一步更新如下

// 把模版放到单独的html文件里，然后引用
var new_dom = document.createRange().createContextualFragment(require('../tpl/comment_modal.html')); 
document.body.appendChild(new_dom)

写个函数稍微封装下

// base/h.js
// A few helper fuctions
const h = {
    postUrl(uri) {
        return location.href.replace(location.search, '') + '/' + uri
    },
    addToDom(str) {
        var new_dom = document.createRange().createContextualFragment(str);

        document.body.appendChild(new_dom)
    }
}

module.exports = h;




window.h = require('./base/h');




h.addToDom(require('../tpl/comment_modal.html'))