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（）在表格周围插入widebox-middle？

$('#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方法需要描述DOM树的完全定义部分 - 也就是说，每个调用必须包含开始和结束标记 - 这些方法添加元素，而不是原始html，因此任何一个语句传入的任何格式错误/不完整的html都将被转换为有效的...

查看.wrap()方法 - 这就是您需要的

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

Answer 3

.before()和.after()插入元素，而不是字符串。未闭合的<div>不是一个完整的元素，因此它会自动关闭。你想要的是使用.wrap()函数将新的<div>包裹在表格周围。 E.g：

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

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);

.before方法添加意外的关闭标记

4 个答案: