Question

I’m working on a project at the moment, migrating an existing site to a new server and make the site work with a new CMS.

The CMS is hideous, with loads of hardcoded content. It’s not possible to edit this content in the CMS.

So I have to replace a lot of HTML with JS.

My plan is to replace the HTML with jQuery’s replaceWith method.

Is this a sound a approach? Or is there a better way to go about this?

Answer 1

If you’re talking about taking a dom element, clearing out the current content, then adding new content in, you can do:

$(document).ready(function() {   
    $('#myelement').empty();
    $('#myelement').append('new stuff');
});

.append() inserts into the dom element, after anything that’s already in it.

Edit:
Just thought of a better way:

$('#myelement').html('new content');

That replaces the content of dom element selected by that selector with the new content. Basically, it does the same as my first solution, but in one line of code. Of course, if you need to put in multiple things (like a loop that adds options to dropdown by reading from an array), then you’d do the .append() inside that loop.

And .html() keeps Prescott’s optimization urges happy with only one paint 😉