Question

将JQuery与内容管理系统结合使用时，我发现自己经常会编写代码片段，例如

$(document).ready(function()
{
    var thishtml = $('#some-element')[0].outerHTML;
    $('#some-element').remove();
    $('#hmpg-btm-box-holder').prepend(thishtml);
});

JQuery是否具有以更紧凑的方式实现这一目标的功能？

Answer 1

这应该足够了：

$(document).ready(function()
{
    $('#hmpg-btm-box-holder').prepend($('#some-element'));
});

我尽量避免使用outerHTML（最好是innerHTML，除非您通过AJAX从受信任的服务器接收某些HTML，并希望将其包含在文档中。< / p>

将元素从Element转换为字符串（HTML）表示并返回Element可能会导致不必要的影响，例如删除附加到其上的所有事件处理程序。

Answer 2

插入/移动单个DOM元素作为另一个元素的第一个子元素是一个简单的单行。

$('#hmpg-btm-box-holder').prepend($('#some-element'));

或者如果你想作为最后一个孩子加入：

$('#hmpg-btm-box-holder').append($('#some-element'));

请注意，在这两种情况下，如果适用，参数中指定的DOM元素将从DOM中的现有位置删除。

这仅适用于解析为单个DOM元素的选择器。对于将集合作为参数传递的情况，行为有点不同，因此请参考函数文档以更好地理解它。

Answer 3

您也可以使用.replaceWith()。

$('.original').replaceWith('.new');

JQuery有“移动”功能吗？或者有更紧凑的方式吗？

3 个答案: