从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

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

只要DOM“重新加载”，没有。使用html（）或append（）时，您将元素直接附加到dom。 jQuery获取元素并附加它们，或者如果你给它html，它会将html转换为DOM片段中的元素，并将该片段附加到DOM。

Answer 2

我们真的需要在$（document）.ready（）中编写我的javascript吗？

不，只要你在dom准备就绪后加载你的javascript。您可以在结束体标记附近添加脚本标记，这样首先dom就会准备就绪，然后它会加载脚本;否则你也可以使用window.onload。

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

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