javascript - 将元素移到新的div中-不采用其新的CSS属性

因此，我有一个附加了某些“预先存在”行为的元素。因此，我发现仅移动它（某些新要求所要求的）就可以保留现有行为=良好。但是问题是，当我移动元素时，我需要给它“新样式”。

所以，如果我有这样的事情：

<div id="existingStructure">
    <div id="legacyElement"></div>
</div>

现在，这两种方法都具有先前存在的样式。我可以重新排列这些样式等。但是我无法更改它们。样式附加到“ id”而不是类定义。我相信我可以根据需要更改它。

现在，当某些事情发生在“新div”上时，我需要移动“ legacyElement”。
我只是

jQuery('#newStructure').append('#legacyElement');

<div id="newStructure">
    <div id="legacyElement"></div>
</div>

不幸的是，当它动态移动到这里时，我在newStructure上拥有的样式似乎不适用于* legacyElement。

我正在考虑将所有样式移至类而不是与ID关联，而在我将其移到..我只是jQuery（）。addClass / jQuery（）。removeClass等...

有没有一种更好/更简便的方法，当我将legacyElement放置在existantStructure下时，就可以释放legacyElement的样式，然后在移至“ newStructure”等位置时获得新的样式，反之亦然。该元素“ legacyElement”将来回ping ..因此，我需要它在每个父div处都具有样式。

因此，当页面上发生操作时，我将其移回：

jQuery('#existingStructure').append('#legacyElement');

如果我不够简洁，请告诉我。

现有样式在外部CSS文件中，就像这样。

#existingStructure {
   // bunch of css
 }

#existingStructure .item1 input[type="text"] {
   // bunch of css
}

 #legacyElement{
   // bunch of css
  }

与新样式大致相同，只是可能会应用“其他样式”。

#newStructure {
   // bunch of css
 }

#newStructure .item1 input[type="text"] {
   // bunch of css
}

最佳答案

您当然可以由父母指定您的div样式：

#existingStructure #legacyElement {some styles}
#newStructure #legacyElement {some other styles}

为了进一步说明，这种安排应导致更高的特异性，并覆盖简单应用于#existingStructure或#legacyElement的样式。我希望没人能像对！important那样愚蠢。