javascript - jQuery .before() 不会插入我定义的内容

Question

我有以下 HTML

html

<aside>
  <section class="links"></section>
  <section class="downloads"></section>
  <section class="news"></section>
  <section class="contact"></section>
<aside>

我试图</aside><aside>在 section.news 之前插入（有效地将备用容器标签分成 2 个备用容器，每个容器有 2 个部分）

jQuery

我用：

$("aside section.news").before("</aside><aside>");

问题

Jquery 总是打印<aside></aside>而不是</aside><aside>像我想要的那样打印。

Answer 1

DOM 元素不是字符串，你不能使用 JavaScript 以这种方式添加元素，DOM 元素是 JavaScript 对象，jQuery 在后台调用创建 DOM HTMLElementcreateElement()对象的对象的方法，它不会将字符串添加到文档中。document

Answer 2

这是这样做的“正确”方式：

• 创建一个side元素
• 将其插入现有的 side 元素之后
• 在其中移动所需的元素

var $aside1 = $("aside:first");
var $aside2 = $("<aside><\/aside>").insertAfter($aside1);
$(".news").nextAll().addBack().appendTo($aside2);

演示在这里

Answer 3

$('</aside><aside>').insertBefore('.news');

作为

<aside>
  <section class="links"></section>
  <section class="downloads"></section>
  </aside><aside>
  <section class="news"></section>
  <section class="contact"></section>
<aside>

关于 .insertBefore 的参考

Answer 4

$(document).ready(function(){
    var one = $('aside').children().eq(0).clone().wrap('<p>').parent().html() + $('aside').children().eq(1).clone().wrap('<p>').parent().html()
    var two = $('aside').children().eq(2).clone().wrap('<p>').parent().html() + $('aside').children().eq(3).clone().wrap('<p>').parent().html()
    $('aside').before('<aside>'+one+'</aside');
    $('aside').eq(1).html(two);

    console.log(one)
    console.log(two)
});