jQuery .html() 是否操作 DOM？答案

【问题标题】：Does jQuery .html() manipulate DOM?jQuery .html() 是否操作 DOM？
【发布时间】：2012-04-01 06:26:52
【问题描述】：

我正在运行以下函数：

    $(function () {
    var tbl = $('table[id^="stg_"]');
    var tmpl = tbl.attr('id').replace('stg_', '');

    // how many elements before
    console.log($(":input, select").length);

    $.get('templates/' + tmpl + '.html', function (data) {
        tbl.html(data);
    });

    // same number after ?
    console.log($(":input, select").length);
});

但是，看起来 jQuery 并没有修改 DOM，因为我在设置表的 html 之前和之后在我的 ":input, select" 选择器上获得了相同的 .length。

这只是一个测试，但我很好奇是否有人尝试过这个或者知道为什么在设置表格的 .html 后长度会相同。

【问题讨论】：

标签： jquery dom dom-manipulation

【解决方案1】：

$.get是异步的，第二条日志显示相同的数字，因为它是在ajax完成之前记录的，试试

console.log($(":input, select").length);
$.get('templates/' + tmpl + '.html', function (data) {
    tbl.html(data);
    console.log($(":input, select").length);//probably it will give a different number
});

或者在你当前的场景设置async:false（强烈不推荐）

$(function () {
    $.ajaxSetup({
       async:false
    });
    var tbl = $('table[id^="stg_"]');
    var tmpl = tbl.attr('id').replace('stg_', '');

    // how many elements before
    console.log($(":input, select").length);

    $.get('templates/' + tmpl + '.html', function (data) {
        tbl.html(data);
    });   

    console.log($(":input, select").length);
});

【讨论】：

就是这样！非常感谢。我会在 10 分钟内将此标记为答案 :)

【解决方案2】：

试试：

$.get('templates/' + tmpl + '.html', function (data) {
    tbl.html(data);
    console.log($(":input, select").length);
});

您正在发出异步请求并在 ajax 请求完成之前打印元素的数量。因此，请尝试在异步执行的回调中打印计数。

【讨论】：

【解决方案3】：

$.get 是异步的 - 它触发它的请求并且代码继续运行。因此，console.log($(":input, select").length); 在$get 返回之前执行。将console.log($(":input, select").length); 添加到回调中（在tbl.html(data) 之后），您会看到更好的结果。

【讨论】：

【解决方案4】：

您首先报告长度，然后才操作 dom ;)。 @Nemoy 和 @3nigma 说了什么。

【讨论】：