Replacing text with a checkbox using ReplaceWith

Question

I'm having trouble replacing text with a div that includes a checkbox. When I have the following code, the text successfully gets replaced:

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

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

</script>

When the replacing text includes a checkbox, however, the script stops working. To be specific, the following does not work:

<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>

If someone could explain how to fix this, I would appreciate it. Thanks!

score 0 · Answer 1 · answered Apr 23 '16 at 03:49

your problem is that you're using html " inside your javascript "

you must use alternating quotes inside this string

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

it should look something like this

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

score 0 · Answer 2 · answered Apr 23 '16 at 04:33

$( ".replaced" ).replaceWith("<div><input type='checkbox' id='fractionsandratioscheck1' class='checkappear'/>REPLACING TEXT.</div>");//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>

Only problem with OP is the "" change them to ''

Replacing text with a checkbox using ReplaceWith

2 Answers2