如何使用 jQuery .replaceWith() 保留（或复制）属性？答案

【问题标题】：How can I preserve (or copy) attributes with jQuery .replaceWith()?如何使用 jQuery .replaceWith() 保留（或复制）属性？
【发布时间】：2014-10-08 15:31:36
【问题描述】：

我是一个 jQuery 新手，在 Trac 模板中做一些货物狂热的编程。请原谅这个愚蠢的问题。

Trac 1.0.1（以及可能的其他版本）有一个预览功能，它使用jQuery.replaceWith() 将新元素（不仅仅是新值）放入票证标题中。不幸的是，我有一个 Trac 插件，它通过设置元素的显示来控制元素的可见性，replaceWith() 创建新元素并且不复制它们的属性。理想情况下，我有一个 jQuery 函数，可以将内容从一组元素复制到另一组元素，这样我就可以就地更新现有元素。但是将属性复制到新元素的东西也可以。这可能吗？

假设我拥有（所有它的 ORIG）是：

<tr id='x'>
   <td display='none'>ABCD</td>
</tr>

而我从服务器得到的更新（称之为 NEW）是：

<tr id='x'>
  <td>QRST</td>
</tr>

替换为后，我的页面最终包含第二个 sn-p。我想要的（称之为 MERGED）是：

<tr id='x'>
  <td display='none'>QRST</td>
</tr>

今天执行此操作的代码是：

$("#ticket").replaceWith(items.filter('#ticket'));

我的结局是：

  function copyHeaderData(f, t) {
    if (f.length != t.length) {
      console.log('Shape mismatch');
    }
    else {
      var i;
      for (i = 0; i < t.length; ++i) {
        t[i].innerHTML = f[i].innerHTML;
      }
    }
  }
  // Update ticket box
  copyHeaderData(items.filter("#ticket").find("td"), $("#ticket td"));

【问题讨论】：

标签： jquery class element replacewith

【解决方案1】：

我相信你会想使用 jQuery 的 .clone() 方法。来自Documentation：

创建匹配元素集的深层副本。

您可以为要克隆的元素创建一个变量，例如：

var el = jQuery('.some-element').clone();

然后将其传递给replaceWith：

jQuery('.some-other-element').replaceWith(el);

【讨论】：

我必须逐个元素地做，对吧？我真正想要的是.copyContentsFrom()（这样我可以将新数据复制到旧结构中）或.copyAttributesFrom()（这将让我克隆原始数据，替换它，然后将属性复制到页面的更新部分克隆。否则，我似乎还不如明确地遍历 DOM 并复制内容。
抱歉，我明白您的意思了，因为您已经更新了原始问题。您只需要更新内部内容吗？能否访问克隆上td的.innerHTML，并设置上一个原始项目的.innerHTML？这将保留父属性。

【解决方案2】：

试试

var elem = $(selector-a);
var _elem = $(selector-b);
var clone = elem[0].attributes;
_elem[0].attributes = clone.NamedNodeMap;

见，也

convert one element into a like element ala Div -> Span and retain all attributes

【讨论】：