使用 ReplaceWith 将文本替换为复选框答案

【问题标题】：Replacing text with a checkbox using ReplaceWith使用 ReplaceWith 将文本替换为复选框
【发布时间】：2016-08-16 19:51:34
【问题描述】：

我无法用包含复选框的 div 替换文本。当我有以下代码时，文本被成功替换：

<p>Hello</p
<p class="replaced">Hello</p>
<p class="replaced">World</p>

<script>
$( ".replaced" ).replaceWith("<div>REPLACING TEXT.</div>");

</script>

但是，当替换文本包含复选框时，脚本将停止工作。具体来说，以下方法不起作用：

<p>Hello</p
<p class="replaced">Hello</p>
<p class="replaced">World</p>

<script>
$( ".replaced" ).replaceWith("<div><input type="checkbox" id="fractionsandratioscheck1" class="checkappear"/>REPLACING TEXT.</div>");

</script>

如果有人能解释如何解决这个问题，我将不胜感激。谢谢！

【问题讨论】：

标签： jquery replacewith

【解决方案1】：

$( ".replaced" ).replaceWith("&lt;div&gt;&lt;input type='checkbox' id='fractionsandratioscheck1' class='checkappear'/&gt;REPLACING TEXT.&lt;/div&gt;");//escape string properly

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello</p
<p class="replaced">Hello</p>
<p class="replaced">World</p>

OP 的唯一问题是 "" 将它们更改为 ''

【讨论】：

【解决方案2】：

您的问题是您在 javascript " 中使用了 html "

你必须在这个字符串中使用交替的引号

$( ".replaced" ).replaceWith("<div><input type="checkbox" id="fractionsandratioscheck1" class="checkappear"/>REPLACING TEXT.</div>");

它应该看起来像这样

$( ".replaced" ).replaceWith('<div><input type="checkbox" id="fractionsandratioscheck1" class="checkappear"/>REPLACING TEXT.</div>');

【讨论】：