jQuery.bfore(）没有't插入我定义的内容

jQuery .before() doesn't insert content as I defined it

本文关键字：插入 定义 bfore 没有 jQuery      更新时间：2023-09-26

我有以下HTML

Html

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

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

jQuery

我使用：

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

问题

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

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

以下是"正确"的方法：

  • 创建一个aside元素
  • 将其插入现有的aside元素之后
  • 在其中移动所需元素
var $aside1 = $("aside:first");
var $aside2 = $("<aside><'/aside>").insertAfter($aside1);
$(".news").nextAll().addBack().appendTo($aside2);

此处演示

$('</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 的参考

$(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)
});
相关文章：