How to replace the content of tinyMCE editor in both text and visual mode using jQuery?

The first thing to do is to select the active editor. Here we select the editor using its id, which is content.

var activeEditor = tinyMCE.get('content');

Then we use tinyMCE’s setContent:

var activeEditor = tinyMCE.get('content');
var content="HTML or plain text content here...";
activeEditor.setContent(content);

However, if the editor is in text mode to begin with, after the page has loaded, activeEditor will be null. So we need to account for that:

var activeEditor = tinyMCE.get('content');
var content="HTML or plain text content here...";
if(activeEditor!==null){
    activeEditor.setContent(content);
}

Since setContent only works for tinyMCE, this wont work if the editor is in text mode. So we have to call the textarea directly and update its value:

var activeEditor = tinyMCE.get('content');
var content="HTML or plain text content here...";
if(activeEditor!==null){
    activeEditor.setContent(content);
} else {
    $('#content').val(content);
}

However, another caveat is that if you toggled into visual mode, then toggled back into text mode, activeEditor is no longer null, so setContent will be called always instead of the textarea. So we have to check for the editor’s state.
To determine the current mode, we monitor the class of div#wp-content-wrap.
Putting it all together:

var content="HTML or plain text content here...";
if($('#wp-content-wrap').hasClass('html-active')){ // We are in text mode
    $('#content').val(content); // Update the textarea's content
} else { // We are in tinyMCE mode
    var activeEditor = tinyMCE.get('content');
    if(activeEditor!==null){ // Make sure we're not calling setContent on null
        activeEditor.setContent(content); // Update tinyMCE's content
    }
}