Javascript jQuery在克隆时更改html

单击我正在复制一个div。我希望修改一些html，然后追加

我已经尝试了以下，它将克隆和附加，但我似乎不能改变html。不确定什么是最好的处理方法，我肯定我搞错了

谢谢

var htmlStr = $(this).parents(".listingContainer").first();
$htmlStr.find(".saveCompareShow").remove()
$(htmlStr).clone().appendTo('.compareWrapper');                         

---

因此，变量htmlStr实际上是一个元素，而不是字符串。但这没关系。我认为你需要在第二行这样做：

htmlStr.remove(".saveCompareShow");

如果我正确地看到，您正试图从htmlStr元素中删除类为“.saveCompareShow”的元素。是这样吗

**编辑**

尝试此操作以替换第2行和第3行

$(htmlStr).clone().remove(".saveCompareShow").appendTo('.compareWrapper');  

---

克隆DOM元素后，应将其视为希望更改未被克隆的DOM元素。您只需使用变量而不是选择器

假设您有如下HTML：

​<div class='listingContainer'>
    <div class='listing'>
        Something
    </div>
    <div class='listing'>
        Another something
    </div>
</div>

​
某物
另一件事

您可以克隆listingContainer DIV的内容，并在将其附加到compareWrapper DIV之前更改内容。以下JavaScript显示了一个简单的示例：

$(document).ready(function() {
    $('.listing').click(function() {
        var $htmlStr = $(this).parents(".listingContainer").first();
        $htmlStr.clone().find('.listing').html('<li>Cloned</li>').appendTo('.compareWrapper');
    });
});

$（文档）.ready（函数（）{
$（'.listing'）。单击（函数（）{
var$htmlStr=$（this）.parents（“.listingContainer”）.first（）；
$htmlStr.clone（）.find（'.listing'）.html（'
Cloned
）.appendTo（'.compareWrapper'）；
});
});

---

我还发布了一个jsFiddle，这样您就可以看到它在工作：

克隆后，您可以将对象视为dom中已经存在的html

例如-页面上的html：

<div id="cloneHere"></div>
<div class="well" id="buildInfoTemplate">
    <form>
        <fieldset>
          <legend></legend>
          <label></label>
          <input type="text" placeholder="Type something…">
          <span class="help-block">Example block-level help text here.</span>

          <button class="btn">Save</button>
        </fieldset>
    </form>
</div>

您将得到：

<div id="cloneHere">
  <div class="well">
    <form>
        <fieldset>
          <legend></legend>
          <label></label>
          <input type="text" placeholder="Type something…">
          <span class="help-block">hi there ryan</span>

          <button class="btn">Save</button>
        </fieldset>
    </form>
  </div>
</div>

你好，瑞安
拯救

您是否正在尝试通过某种id属性编辑克隆的html，该属性可能不再唯一标识一个元素，因为它是一个克隆？抱歉，应该更清楚，.saveCompareShow是一个div，其中包含被复制的outter，它就在那里。我只是使用了不正确的语法来查找它。firebug中的错误是$htmlStr未定义请注意：您在第二行引用了一个未定义的变量。“htmlStr”和“$htmlStr”是不同的变量显示HTML并显示所需的后状态。我已经尝试过，但它不起作用。我看到您使用了htmlStr而不是我的$htmlStr，这确实有效，但它将该类从原始类和cloned@KeithPower-请参阅我的编辑，是的，我提供的原始解决方案将从原始元素中删除该元素。

<div id="cloneHere">
  <div class="well">
    <form>
        <fieldset>
          <legend></legend>
          <label></label>
          <input type="text" placeholder="Type something…">
          <span class="help-block">hi there ryan</span>

          <button class="btn">Save</button>
        </fieldset>
    </form>
  </div>
</div>