jQuery 的替换： $('#id').html(HTMLfragment) // 包括。<脚本>执行

Question

HTMLfragment 是包含

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

不起作用（所有浏览器，包括 Chrome）。它仅适用于其中不包含任何

更新

我的responseText...

<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 方法不会。 使用文档方法，仅应用非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 上工作。你能显示更大的不起作用的代码片段吗？
您还发现它在哪些浏览器中出现故障？