jQuery .html() 是不是操作 DOM？

Posted 2023-05-09

【中文标题】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 后长度会相同。

【参考方案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 说了什么。