How to Replace the Entire HTML Node Using Jquery

How do I replace the entire HTML node using jQuery

The document.open/write/close methods will do what you want:

var newDoc = document.open("text/html", "replace");
newDoc.write(myString);
newDoc.close();

Unless you pass in the replace parameter, the document.open call adds page history. So users would have to click back twice to go to the previous page.

jQuery: How to replace the whole DOM with another HTML using .load

This is fundamentally a feature of browsers.

Here's a snip from the jQuery docs for .load():

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

While I don't recommend what you're suggesting at all, I will attempt to answer your question:

Using a server-side language (like PHP, for example), return documents as parsed json:

{
    "head": [head string],
    "body": [body string]
}

Then your JavaScript can individually replace each element.
You'll need to switch from .load() to something more configurable, like .ajax()

How can I replace the entire HTML of a page, or its body content, via an AJAX call's success callback?

remove() will remove the body element (instead of just clearing it out). You can use this to match what you are trying to do

$("body").empty();  
$("body").append($(returneddata));

but it would be better to use

$("body").html(returneddata);

You also may want to look into the jQuery load() function which will place the html into the element(s) for you.

jquery replace full document content

use:

document.open();
document.write(myString);
document.close();

You can also try:

    var startHead = myString.indexOf("<head>");
    var endHead = myString.indexOf("</head>");        
    var headString = myString.substring(startHead+6,endHead);

    var startBody = myString.indexOf("<body>");
    var endBody = myString.indexOf("</body>");
    var bodyString = myString.substring(startBody+6,endBody);

    jQuery('head').html(headString);
    jQuery('body').html(bodyString);

how to replace element contents with new html without loosing javascript function?

You can use jQuery .on() method signature for defining event handlers e.g.

$(document).on('click', '#userclickedhere', yourClickHandlerFunction);

jQuery .on() doc

Updated Answer:
It will still work.

$(document).on('click', '#clickme', function(e) {
  $(this).html("yayImChanged");
});

Here is a CodePen demo

Replace entire page contents (with DOCTYPE)

Never mind. I decided I could just replace the content inside the <html> tags. The code I used was:

var contents = "Sorry : ( IMPORT FAILED...";
var file = new XMLHttpRequest();
file.open("GET", "/toload.html", false);
file.onreadystatechange = function() {
    contents = file.responseText;
}
file.send(null);
document.getElementsByTagName("html")[0].innerHTML = contents;

Thanks for your wonderful answers anyway!

How to replace innerHTML of a div using jQuery?

$("#regTitle").html("Hello World");