Javascript 脚本完成后修改动态元素

我对JavaScript比较陌生，所以请耐心听我说

我运行了一个黑板学习LMS的实例。以后为我感到难过。黑板向最终用户显示不同的模块，以显示不同的信息。公告模块包含不可编辑代码，该代码发送Ajax请求，以显示该特定用户的所有系统范围和特定于课程的公告：

<div id="Announcements">
    <div id="div_1_1"> </div>
    <script type="text/javascript">
        Event.observe(window, 'load', function () {
            new Ajax.Request('/webapps/portal/execute/tabs/tabAction', {
                method: 'post',
                parameters: 'action=refreshAjaxModule&modId=_1_1&tabId=_2830_1&tab_tab_group_id=_155_1',
                onSuccess: function (transport) {
                    try {
                        var res = transport.responseXML.getElementsByTagName('contents')[0].firstChild.nodeValue;
                        $('div_1_1').innerHTML = res.stripScripts();
                        page.globalEvalScripts(res, true);
                    } catch (e) {
                        $('div_1_1')
                            .innerHTML = 'Module information is temporarily unavailable. Please reload the page. <!--' + e.toString()
                            .escapeHTML()
                            .gsub('-', '&#045;') + '-->';
                    }
                },
                onFailure: function (transport) {
                    $('div_1_1').innerHTML = 'Error loading module.';
                }
            });
        });
    </script>
</div>

事件。观察（窗口“加载”功能（）{
新的Ajax.Request（“/webapps/portal/execute/tabs/tabAction”{
方法：“post”，
参数：'action=refreshAjaxModule&modId=\u 1\u 1&tabId=\u 2830\u 1&tab\u tab\u group\u id=\u 155\u 1'，
onSuccess:功能（传输）{
试一试{
var res=transport.responseXML.getElementsByTagName（'contents'）[0].firstChild.nodeValue；
$（'div_1_1'）。innerHTML=res.stripscript（）；
page.globalevalscript（res，true）；
}捕获（e）{
$（'div_1_1'）
.innerHTML='模块信息暂时不可用。请重新加载页面'；
}
},
onFailure：功能（传输）{
$（'div_1_1'）。innerHTML='加载模块时出错'；
}
});
});

这个模块带来了很多我想隐藏的冗余信息。由于无法编辑该特定代码，我一直在试图找到一种方法来执行以下操作之一：

使用页面上其他来源的附加脚本修改模块内容

将模块的内容复制到新的可编辑模块，并显示该模块

这两种方法都被证明是不可能的，因为公告模块中的脚本只在页面完全加载后运行，因此无法在之后运行脚本或等待过程完成

---

关于如何在不直接编辑代码的情况下修改内容，您有什么想法吗？

我最终使用了DOMSubtreeModified事件：

<script type="text/javascript">
    $j = jQuery.noConflict();p
    $j("#div_1_1").on("DOMSubtreeModified", function () {
        var div = document.getElementById("div_1_1");
        var inner = div.innerHTML;
        inner = inner.substring(
            inner.indexOf("<!-- Display course/org announcements -->")
        );
        div.innerHTML = inner;
    });
</script>

$j=jQuery.noConflict（）；P
$j（“#div_1_1”）。在（“domsubertreemodified”，函数（）{
var div=document.getElementById（“div_1_1”）；
var inner=div.innerHTML；
inner=inner.substring(
内部索引（“”）
);
div.innerHTML=内部；
});

我最终使用了DOMSubtreeModified事件：

<script type="text/javascript">
    $j = jQuery.noConflict();p
    $j("#div_1_1").on("DOMSubtreeModified", function () {
        var div = document.getElementById("div_1_1");
        var inner = div.innerHTML;
        inner = inner.substring(
            inner.indexOf("<!-- Display course/org announcements -->")
        );
        div.innerHTML = inner;
    });
</script>

$j=jQuery.noConflict（）；P
$j（“#div_1_1”）。在（“domsubertreemodified”，函数（）{
var div=document.getElementById（“div_1_1”）；
var inner=div.innerHTML；
inner=inner.substring(
内部索引（“”）
);
div.innerHTML=内部；
});

假定模块的内容周围有一个容器元素（即div），您可以通过测试在该容器上挂起一个domsubtreedinformed事件，查看它是否已加载（检查只有在加载完成时才在那里的特定子元素）。然后销毁事件侦听器并根据需要进行修改。假定模块内容周围有一个容器元素（即div），您可以通过测试将DOMSubtreeModified事件挂接到该容器上，以查看是否已加载（检查只有在加载完成后才在那里的特定子元素）。然后销毁事件侦听器并根据需要进行修改。