当我们从DOM中添加/删除元素时的DOM行为

Question

每当我必须显示弹出窗口时，我习惯于在网页上添加一个空的div标签和一个按钮，例如

<div id="popupDiv"></div>
<input type="button" id="popupButton" />

然后，我使用jQuery钩住按钮单击事件，并使用ajax调用服务器方法，该方法将返回部分视图html内容，如下所示，我使用jQuery html方法将其绑定到div元素：

$('#popupButton').click(function () {
            $.ajax({
                cache: false,
                data: {},
                dataType: 'html',
                type: 'GET',
                url: '/Inquiry/Inquiry/GetPopupHtml',
                success: function (data) {
                    $('#popupDiv').html(data);
                },
                error: function (data) {
                    alert('Oops! An error has occured!');
                }
            });
});

我还引用了局部视图中的脚本文件，以在html文件末尾的弹出窗口中添加功能。 我在里面添加了所有的javascript

$(document).ready(function(){
//my code inside script
})

我有以下问题

我们是否真的需要在$（document）.ready（）中编写我的JavaScript？

当我们从DOM中添加/删除元素时，还是在现有元素（ popupDiv ）中添加html内容时，即当我使用$（'＃popupDiv'）。html（data）显示弹出内容时，DOM是否会重新加载？

Answer 1

我们是否真的需要在$（document）.ready（）中编写我的JavaScript？

否，前提是您在dom准备就绪后正在加载JavaScript。 您可以在关闭的body标签附近添加script标签，以便首先准备好dom，然后加载脚本。 否则你也可以使用window.onload 。

当我们从DOM中添加/删除元素时，是否会重新加载DOM？

不，如果重新加载dom，则会重新加载整个页面。 在追加/删除期间，仅增量更改被更新。

Answer 2

准备就绪的文档用于延迟脚本执行，直到页面已解析为DOM。 如果将脚本放在页面底部，则不需要准备文档。

至于DOM是“重新加载”的，否。 使用html（）或append（）时，将元素直接附加到dom。 jQuery接受元素并将其附加，或者，如果您给它添加html，它将把html转换为DOM片段中的元素，并将该片段附加到DOM。