Question

我是jQuery的新手，并尝试将一个<div>的HTML内容注入另一个<div>。这是我正在使用的代码：

<div class="relatedItems"> </div>

<script>
    jQuery.noConflict();
    jQuery(document).ready(function() {
        var related = jQuery("div.itemRelated").html();   
        jQuery("div.relatedItems").html("<div class='itemRelated'>" + related + "</div>");  
    });
</script>

问题是注入的HTML的格式与原始格式不同。

我很想发布图片，但不能因为我是新用户

如果我遗漏了任何想法？

Answer 1

这不是复制HTML元素的理想方式。完整的原因，请参阅我对Why should y.innerHTML = x.innerHTML; be avoided?的回答。 jQuery可以更优雅的方式为您处理这个问题：

var related = jQuery('div.itemRelated')
    .clone(true, true);
jQuery('div.relatedItems').html(related);

这可能会解决您的一些问题，尤其是与事件处理程序相关的问题。但是，如果样式不正确，则需要调整一些特定的样式规则。使用Chrome控制台（如Chrome控制台或Firebug）检查相关元素，以查看哪些样式未应用。

Answer 2

您可以改为使用clone：

jQuery(document).ready(function() {
    jQuery("div.relatedItems").html(jQuery("div.itemRelated:first").clone());  
});

Answer 3

您正在使用元素的文本来尝试反映其当前的外观状态，但您只使用内部元素。您描述的问题的最可能原因是：

'div.itemRelated'元素具有不被视为
'div.itemRelated'元素具有正在应用的样式效果，因为它的父元素已应用样式。

尝试解决第一个问题：

jQuery.noConflict();
jQuery(document).ready(function(){
  related = jQuery('div.itemRelated').clone();
  jQuery('div.relatedItems').append(related);
});

通过将元素克隆到当前元素parent中可以发现第二种可能性。如果样式在同一个父级中是正确的但在新父级（relatedItems）中不正确，则样式由分层选择器提供，并且需要进行一些CSS调整。

作为一般规则，您需要在请求样式问题的帮助时包含CSS信息。

jQuery失去了格式

3 个答案: