使用jQuery切换包装元素的最佳方法

Question

我有一个HTML代码

<span id="s">Attachments</span>

如何使用jQuery将外部SPAN元素与以下表格代码块交换，使"Attachments"文本被包装在表格元素中。

<table id="t">
  <tr>
    <td>Attachments</td>
  </tr>
</table>

- Registered User

---

在这里找到了解决方案：https://dev59.com/dnTYa4cB1Zd3GeqP0Ouo - Sky Yip

Answer 1

你可以创建一个包含 tr 和 td 的表格，将 span 中的 HTML 内容插入到新的 td 元素中，在 span 后立即插入表格，最后移除 span。

$("<table id='t'><tr><td>" + $("#s").html() +
    "</td></tr></table").insertAfter("#s");

$("#s").remove();

我假设你所说的“swipe”是指“交换”，因此我已经删除了原始的标签。如果不是这种情况，只需省略remove调用即可。

- jamesmortensen

---

尝试使用这个链接代替：http://jsfiddle.net/Fh24j/。我不得不更改jsFiddle，以便它不使用onLoad，因为它无法定义您的函数。我还简化了代码，并将insertAfter放在创建表格的同一命令中。 - jamesmortensen

删除我之前的评论。 - Registered User

Answer 2

将#s元素包裹起来，然后用它自己的内容替换它：

$("#s")
  .wrap("<table id='t'><tr><td></td></tr></table>")
  .replaceWith(function(){ 
      return this.innerHTML; 
  });

演示: http://jsbin.com/elotan/edit#source

在下面的评论中进一步讨论后，看起来OP希望能够临时创建一个表，并在其中的任何一个中插入#s。以下是更好的方法：

$("<table>", { 
  id:'t', html:'<tr><td>Foo</td><td>' + $("#s").html() + '</td></tr>'
}).replaceAll("#s");

- Sampson

---

这很棒！我有点困惑，它如何知道在哪里插入文本。例如：http://jsbin.com/asinop ，它是如何知道将“Attachment”插入单元格1而不是单元格2的？ - Registered User

@RegisteredUser 第一个单元格被认为是最内层的容器。因此，它是最终使用的位置。我建议您不要在包装字符串方面变得过于复杂。 - Sampson

好的，但是我有一个问题。如果我想要将位置作为第二个TR/TD容器，我应该做什么修改？ - Registered User

@RegisteredUser 这是一个完全不同的问题，我的朋友 :) 不过，我建议你创建新表，然后将 #s 的未包装文本分配为第二个 tr/td 的值。 - Sampson

好的，问题被简化以减少复杂性。我实际的需求是将其插入到一个更复杂的表中。我必须给@jmort253正确的答案，因为他的解决方案更灵活。 - Registered User

@RegisteredUser 尽管我感觉到解决了两个不同的问题，但是根据我们在这里的讨论，我已经更新了我的答案。 - Sampson