如何使用 Jquery 替换或覆盖容器中附加的 html 字符串答案

【问题标题】：How to replace or override the appended html string from a container using Jquery如何使用 Jquery 替换或覆盖容器中附加的 html 字符串
【发布时间】：2016-01-15 14:21:36
【问题描述】：

有一个包含画布的容器：

<div id="container1">
<canvas id="canvas1" width="378" height="500" > </canvas>
</div>

从 JS 我将一个 html 字符串附加到这个容器。

$("#Container1").append(html_string1);

并且在 UI 上渲染成功。

现在，在我看来，html 字符串已被修改，它再次调用 js 方法将 html 字符串附加到容器中，但这次它删除了画布并且它不会出现在 UI 上。

我尝试过使用以下方法：

$("#Container1").html(html_string1);
$("#Container1").replaceWith(html_string1);

但他们都失败了。这里有什么帮助吗？

【问题讨论】：

你为什么不再做一次append？你想做什么？
当我再次附加字符串时，它会从容器中删除画布。我正在从后端生成 html 字符串，所有数据都来自 DB。
好吧，如果你使用$("#Container1").html(html_string1);，那么canvas当然就没有了，因为你删除了container1的内容并用你的html_string1设置它。你需要再$("#Container1").append(html_string1);，不是吗？
对预期行为的更好解释会有所帮助。 all fails 不是正确的问题描述

标签： javascript jquery html django

【解决方案1】：

您需要像第一次一样使用append：

$("#Container1").append(html_string1);

如果您替换 container1 的 html，那么您也将替换画布，当您这样做时会发生这种情况：

$("#Container1").html(html_string1);

或

$("#Container1").replaceWith(html_string1);

如果你想remove 添加的 html，你必须这样做：

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

【讨论】：

【解决方案2】：

听起来您希望能够将 html_string 放置在 Container1 中并多次这样做，每次都覆盖前一个字符串。在这种情况下，我会在您的画布之前或之后添加一个元素并添加到其中。

<div id="container1">
<p id="text"></p>
<canvas id="canvas1" width="378" height="500" > </canvas>
</div>

$('#text').html(html_string);

这样就可以很容易地在不影响画布的情况下对 html_string 的内容进行样式设置。

【讨论】：