.before 方法添加了意外的关闭标签答案

【问题标题】：.before method adds unexpected close tags.before 方法添加了意外的关闭标签
【发布时间】：2011-02-08 18:22:23
【问题描述】：

我的标记中有一个表格，我想在其前后添加一些 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>

有人知道是什么原因造成的吗？

【问题讨论】：

标签： javascript jquery dom dom-manipulation

【解决方案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>');

【讨论】：

除了你的widebox-middle选择器应该是.widebox-middle而不是#widebox-middle（你需要按类而不是id选择）
对！我会改变它。谢谢你:)

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

.before 和 .after 方法需要描述 DOM 树的一个完全定义的部分——也就是说，每个调用必须包含开始和结束标记——这些方法添加元素，而不是原始 html，因此您通过任何一条语句传入的任何格式错误/不完整的 html 都将被转换为有效的内容...

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

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

【讨论】：

【解决方案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);

【讨论】：