jQuery .before（）不会像我定义的那样插入内容

Question

我有以下HTML

HTML

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

我正在尝试在section.news之前插入</aside><aside>（有效地将旁边的容器标签分成2个容器，每个容器中有2个部分）

的jQuery

我用：

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

问题

Jquery始终按照我的意愿打印<aside></aside>而不是</aside><aside>。

Answer 1

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

Answer 2

这是“正确”的做法：

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

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

Demo here

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>

Reference关于.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)
});