Quiero cambiar o reemplazar la etiqueta html completa, no solo dentro:
function addToLikes(image_id) { $.ajax({ url: 'functions/addToLikes.php', method: 'POST', data: { image_id: image_id }, success: function(data) { document.getElementById(image_id).innerHTML = `<i class="bi bi-heart-fill ms-3" onclick="removeFromLikes('<?php echo $row['image_id'] ?>')" style="cursor:pointer"></i>`; } }); }HTML
<i class="bi bi-heart ms-3" id="<?php echo $row['image_id'] ?>" onclick="addToLikes('<?php echo $row['image_id'] ?>')" style="cursor:pointer"></i>Esta es una mejor manera, mucho más rápida y no hace que el DOM parpadee.
$(".bi").on("click", function(e) { const $this = $(this) const liked = $this.hasClass("bi-heart-fill"); $.post("functions/toggleLikes.php', { id: $this.data("id"), liked:liked },function() { liked = !liked; $this.toggleClass("bi-heart-fill",liked) $this.toggleClass("bi-heart",!liked) }) }) <i class="bi bi-heart<?= $liked?"fill":"" ?> ms-3" data-id="<?php echo $row['image_id'] ?>" style="cursor:pointer"></i> </div>