.before метод добавляет неожиданные закрывающие теги

Question

В моей разметке есть таблица, в которую я хочу добавить некоторые элементы div до и после этого, например:

<div class="widebox">
<div class="widebox-header">Opret/rediger bruger</div>
<div class="widebox-middle">
<table id="Table3"></table>
</div>
<div class="widebox-bottom"></div>
</div>

Я пытаюсь сделать это с помощью jQuery, вот так:

$('#Table3').before('<div class="widebox"><div class="widebox-header">Opret/rediger bruger</div><div class="widebox-middle">');
$('#Table3').after('</div><div class="widebox-bottom"></div></div>');

Однако это то, что отрисовывает, похоже, метод закрывает мои первые div:

<div class="widebox">
    <div class="widebox-header">Opret/rediger bruger</div>
    <div class="widebox-middle"></div></div><!-- unexpected close divs -->
    <table id="Table3"></table>
<div class="widebox-bottom"></div>

Кто-нибудь знает, что может быть причиной этого?

Answer 1

before () и after () автоматически закрывают элементы. Почему бы не попробовать использовать wrap () для вставки широкоугольной рамки вокруг стола?

$('#Table3').wrap('<div class="widebox-middle" />');
$('.widebox-middle').wrap('<div class="widebox" />');
$('.widebox-middle').before('<div class="widebox-header">Opret/rediger bruger</div>');
$('.widebox-middle').after('<div class="widebox-bottom"></div>');

Answer 2

.before() и .after() вставляют элементы, а не строки. Незакрытый <div> не является полным элементом, поэтому он автоматически закрывается. Вам нужно использовать функцию .wrap(), чтобы обернуть новый <div> вокруг стола. E.g.:

$('#Table3').wrap('<div class="widebox-middle" />');

Answer 3

Методы

.before и .after должны описывать полностью определенную часть дерева DOM, то есть каждый вызов должен содержать открывающий и закрывающий теги - эти методы добавляют элементы , а не необработанный html, поэтому любой искаженный / неполный html, который вы передадите с одним оператором, будет преобразован во что-то допустимое ...

Проверьте метод .wrap() - это то, что вам нужно

http://api.jquery.com/wrap/

Answer 4

Вы можете .wrap() таблица с этими div. Но в этом случае я бы предпочел возьмите таблицу из DOM, создайте новую структуру DOM и вставьте ее обратно, как:

var myTable   = $('#Table3'),
    root      = myTable.parent(),
    DOMStruct = $('<div class="widebox"><div class="widebox-header">Opret/rediger bruger</div><div class="widebox-middle"></div><div class="widebox-bottom"></div></div>');

myTable.detach();

DOMStruct.find('.widebox-middle').append(myTable);
root.append(DOMStruct);