【问题标题】:jQuery - Appending a div to body, the body is the object?jQuery - 将 div 附加到 body,body 是对象吗?
【发布时间】:2012-02-25 05:44:49
【问题描述】:

当我向 body 添加一个 div 时,它会将 body 作为对象返回,然后每当我使用它时 - 它显然是在使用 body。不好。

代码:-

var holdyDiv = $('body').append('div');
$(holdyDiv).attr('id', 'holdy');

holdy 的“id”现在被添加到 body 中……嗯?我做错了什么。

【问题讨论】:

    标签: jquery html append


    【解决方案1】:

    jQuery 方法返回它们所应用的集合。

    使用.appendTo:

    var $div = $('<div />').appendTo('body');
    $div.attr('id', 'holdy');
    

    【讨论】:

    • 这似乎将它添加到正确的位置但返回每个对象?当我设置 holdyDiv id 时,它已将每个 id 更改为 holdDiv。
    • 它将返回刚刚附加的 DIV 元素并将 id 仅应用于该元素。
    【解决方案2】:
        $('body').append($('<div/>', {
            id: 'holdy' 
        }));
    

    【讨论】:

      【解决方案3】:
      $('</div>').attr('id', 'holdy').appendTo('body');
      

      【讨论】:

        【解决方案4】:

        改为使用appendToappendappendTo 返回一个 jQuery 对象,因此您不必将其包装在 $() 中。

        var holdyDiv = $('<div />').appendTo('body');
        holdyDiv.attr('id', 'holdy');
        

        .appendTo()参考:http://api.jquery.com/appendTo/

        或者你也可以试试这个。

        $('<div />', { id: 'holdy' }).appendTo('body');
                       ^
                     (Here you can specify any attribute/value pair you want)
        

        【讨论】:

        • var holdyDiv = $('div').appendTo('body'); 应该是 var holdyDiv = $('&lt;div /&gt;').appendTo('body');。注意更改:'div' --> '&lt;div /&gt;'。正如答案中所写,'holdy' id 将错误地应用于所有预先存在的 div,而不仅仅是一个新创建的 div。
        【解决方案5】:

        使用 jQuery appendTo 试试这个:

        var holdyDiv = $('<div></div>').attr('id', 'holdy');
        holdyDiv.appendTo('body');
        

        【讨论】:

          【解决方案6】:
          var $div = $('<div />').appendTo('body');
          $div.attr('id', 'holdy');
          

          【讨论】:

          • 这个答案目前有 2 票反对。我怀疑有两个原因(1)它只是代码(有效但温和的批评); (2)它与接受的答案相同(目前有 35 个赞成票)。然而,编辑历史显示这个答案实际上对接受的答案做了一个小但非常重要的更正。原始接受的答案:var $div=$('div')... 错误地引用了所有预先存在的 div。此更正:var $div=$('&lt;div/&gt;)...` 正确指代单个新创建的 div。接受的答案随后被编辑。感谢@Abhishek。 (其他一些答案也抓住了这一点。)
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-02-04
          • 1970-01-01
          • 1970-01-01
          • 2013-10-02
          • 2023-03-14
          • 1970-01-01
          相关资源
          最近更新 更多