如何执行第二个jQuery代码段来添加HTML代码

Question

I'd like to remove all class that have icons on them. Also, I'd like to replace their HTML code.

There is .icon-eye-open that got font awesome icon on it, i want to change it for twitter heart snippet.

I managed to remove class, so i have empty space to add html code but i stuck in choosing the way how to. I googled a lot of diffrent ways, but the jQuery looks the easiest to fire off, but apparently its not working.

$(document).ready(function() {
$('.visible-desktop').after('<a href="/basketedit.php?mode=2"><input id="toggle-heart" type="checkbox"/><label for="toggle-heart">❤</label></a>');
});

The point is that i can't touch HTML or parcial css. Codepen: https://codepen.io/graphconcept/pen/vwNNwQ

Answer 1

If your code is the same as what's in your script, JS does not go well with litteral linebreaks in strings;

You'll have to escape the linebreak

$(document).ready(function() {
    $('.visible-desktop').after('<a href="/basketedit.php?mode=2"><input id="toggle-heart" type="checkbox"/> \
    <label for="toggle-heart">❤</label></a>');
});

-OR- Concatenate the 2 strings

$(document).ready(function() {
    $('.visible-desktop').after('<a href="/basketedit.php?mode=2"><input id="toggle-heart" type="checkbox"/>' +
    '<label for="toggle-heart">❤</label></a>');
});

-OR- Like Roy said in the comments, remove the break.

$(document).ready(function() {
    $('.visible-desktop').after('<a href="/basketedit.php?mode=2"><input id="toggle-heart" type="checkbox"/> <label for="toggle-heart">❤</label></a>');
});