jQuery的替换：$（&#39;＃id&#39;）。html（HTMLfragment）//含。 <script> execution

Question

HTMLfragment是包含<script>部分的HTML片段。 因此

document.getElementById('id').innerHTML = HTMLfragment;

不起作用（所有浏览器，包括Chrome）。 它仅适用于其中没有任何<script>部分的HTML片段。 那么，如何使用Google Closure或（甚至更好的）纯JavaScript将具有<script>部分的HTML片段分配给DIV？

更新资料

我的回应文字...

<style>
    label, input {
        display: block;
    }
</style>

<script>
    function edit(cmdName) {
        document.getElementById("edit-form-" + cmdName).style.display = "block";
    }

    function hide(cmdName) {
        document.getElementById("edit-form-" + cmdName).style.display = "none";
    }

    var applyValues = function() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/cmd/list.json', false);
        xhr.onload = function(e) {
            fillPager(JSON.parse(this.responseText).cmds);
        };
        xhr.send();
    };


    applyValues();


    function cmdDelete(cmdName) {
        var xhr = new XMLHttpRequest();
        xhr.open('get', '/cmd/delete?name=' + cmdName, true);
        xhr.onload = function(e) {
            location.reload();
        };
        xhr.send(null);
    }

    function sendForm(form) {
        var formData = new FormData(form);
        var xhr = new XMLHttpRequest();
        xhr.open('post', form.action, true);
        xhr.send(formData);
        return false; // Prevent page from submitting.
    }

    function fillPager(cmdsJson) {
        var pager = document.getElementById('pager');
        for (var i in cmdsJson) {
            var row = document.createElement('tr');

            var cellName = document.createElement('td');
            var cellRESTcall = document.createElement('td');
            var cellDesc = document.createElement('td');
            var cellCreator = document.createElement('td');
            var cellUser = document.createElement('td');
            var cellCreated = document.createElement('td');
            var cellUpdated = document.createElement('td');
            var cellDelete = document.createElement('td');

            function buildUpdationForm() {
                var updateForm = document.createElement('form');
                var fieldset = document.createElement('fieldset');
                var inputName = document.createElement('input');
                inputName.setAttribute('value', cmdsJson[i].Name);
                inputName.setAttribute('name', 'edit-name');
                inputName.setAttribute('id', 'edit-name');
                inputName.setAttribute('readonly', true);
                var inputShortcut = document.createElement('input');
                inputShortcut.setAttribute('value', cmdsJson[i].RESTcall);
                inputShortcut.setAttribute('name', 'edit-restCall');
                inputShortcut.setAttribute('id', 'edit-restCall');
                var inputDesc = document.createElement('input');
                inputDesc.setAttribute('value', cmdsJson[i].Desc);
                inputDesc.setAttribute('name', 'edit-desc');
                inputDesc.setAttribute('id', 'edit-desc');
                var updateButton = document.createElement('button');
                var updateButtonValue = document.createTextNode("Update");
                updateButton.appendChild(updateButtonValue);
                updateButton.setAttribute('onclick', 'location.reload(); hide("' + cmdsJson[i].Name + '"); return sendForm(this.form);');

                updateForm.setAttribute('style', 'display: none;');
                updateForm.setAttribute('id', 'edit-form-' + cmdsJson[i].Name);
                updateForm.setAttribute('action', '/cmd/update');
                updateForm.setAttribute('method', 'post');

                fieldset.appendChild(inputName);
                fieldset.appendChild(inputShortcut);
                fieldset.appendChild(inputDesc);
                fieldset.appendChild(updateButton);
                cellName.appendChild(updateForm);

                updateForm.appendChild(fieldset);
            }

            buildUpdationForm();

            var cellNameLink = document.createElement('span');
            cellNameLink.innerHTML = '<a href="javascript:edit(\'' + cmdsJson[i].Name + '\');">' + cmdsJson[i].Name + '</a>';
            var cellRESTcallTxt = document.createTextNode(cmdsJson[i].RESTcall);
            var cellDescTxt = document.createTextNode(cmdsJson[i].Desc);
            var cellCreatorTxt = document.createTextNode(cmdsJson[i].Creator);
            var cellUserTxt = document.createTextNode(cmdsJson[i].User);
            var cellCreatedTxt = document.createTextNode(cmdsJson[i].Created);
            var cellUpdatedTxt = document.createTextNode(cmdsJson[i].Updated);
            var cellDeleteLink = document.createElement('button');
            cellDeleteLink.innerHTML = 'X';
            cellDeleteLink.setAttribute('onclick', 'cmdDelete("' + cmdsJson[i].Name + '");');

            cellName.appendChild(cellNameLink);
            cellRESTcall.appendChild(cellRESTcallTxt);
            cellDesc.appendChild(cellDescTxt);
            cellCreator.appendChild(cellCreatorTxt);
            cellUser.appendChild(cellUserTxt);
            cellCreated.appendChild(cellCreatedTxt);
            cellUpdated.appendChild(cellUpdatedTxt);
            cellDelete.appendChild(cellDeleteLink);

            row.appendChild(cellName);
            row.appendChild(cellRESTcall);
            row.appendChild(cellDesc);
            row.appendChild(cellCreator);
            row.appendChild(cellUser);
            row.appendChild(cellCreated);
            row.appendChild(cellUpdated);
            row.appendChild(cellDelete);

            pager.appendChild(row);
        }
    }
</script>

<form action="/cmd/create" method="post">
    <fieldset>
        <legend>Command</legend>
        <label for="name">Name</label>
        <input name="name" id="name" type="text" value="name"/>
        <label for="restCall">Shortcut</label>
        <input name="restCall" id="restCall" type="text" value="rc"/>
        <label for="desc">Description</label>
        <input name="desc" id="desc" type="text" value="desc"/>
        <input type="submit" value="Create">
    </fieldset>
</form>

<table id="pager">
    <tr>
        <th>Name</th>
        <th>RESTcall</th>
        <th>Description</th>
        <th>Creator</th>
        <th>User</th>
        <th>Created</th>
        <th>Updated</th>
        <th>Delete</th>
    </tr>
</table>

...是我执行此代码段的XHR2 responseText得到的结果：

            var xhr = new XMLHttpRequest();
            xhr.open('GET', handlerMap[window.location.pathname], false);
            xhr.onload = function(e) {
                console.log(this.responseText);
//                $('#main').html(this.responseText);
                document.getElementById('main').innerHTML = this.responseText;
            };
            xhr.send();

带注释的jQuery方法可以将responseText内容分配给ID为“ main”的DIV元素，而常规的JavaScript方法则不能。 使用document方法，仅应用了非JavaScript部分（我可以看到表格和表单），但是无法执行JavaScript部分。

那么如何在不使用jQuery的情况下将responseText分配给DIV元素呢？

Answer 1

$('#id').append('<script type="text/javascript" src="http://somesite.com/somejs.js"></script>');

这会将脚本附加到#id innerHTML的末尾。 相当容易。 风格将是一回事。

您也可以：

var s = document.createElement("script");
s.type = "text/javascript";
s.innerHTML = "//write your js code here"+
              "//and here ";
document.getElementsByTagName("head")[0].appendChild(s);

那将允许您做同样的事情。

Answer 2

document.getElementById('question').innerHTML = '<style>* { color:red; }</style>'; 

例如在SO上为我工作。 您可以显示无效的较大代码段吗？ 您还发现在哪些浏览器中有故障？