Javascript-форум - полная замена html страницы

Добрый день,

проблема такая: контент страницы вставить в другой шаблон, не уходя с исходной страницы, и не теряя скрипты и стили

страница с контентом index.html

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="//localhost/share/assets/css/style.css">        
    </head>
    <body>
		<div id="content"> 
			<h1>Page content</h1>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
			<button id="click-me">test</button>
		</div>
		<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
		<script src="//localhost/share/assets/js/script.js"></script>
		<script>		
		$(function() {		
			$('#content').find('h1').css({'text-transform':'uppercase'});			
		});
		</script>		
	</body>
</html>

страница шаблона mobile-page.html

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Mobile page</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="//localhost/share/assets/css/style-mobile.css">
    </head>
    <body>
		<nav class="mobile-nav">
		<ul>
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		</ul>	
		</nav>
		<div id="mobile-content"> 
			
		</div>
		<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
		<script src="//localhost/share/assets/js/script-mobile.js"></script>
		<script>		
		$(function() {		
			console.log(opts.lang);			
		});
		</script>
	</body>
</html>

script.js (index.html)

$(function() {		
	$('#click-me').click(function() {
	  console.log('click');
	});
		
	var origContent = $('#content').html();

	$.ajax({
		url: '//localhost/share/mobile-page.html', 
		cache: false,
		dataType: 'html',
		success: function(response) {			
			
			var startHead = response.indexOf("<head>");
			var endHead = response.indexOf("</head>");		  
			var headString = response.substring(startHead+6,endHead);

			var startBody = response.indexOf("<body>");
			var endBody = response.indexOf("</body>");
			var bodyString = response.substring(startBody+6,endBody);
			
			// дальше не совсем понимаю что делать...
			
			var newContent = $(bodyString).filter('#mobile-content').empty().append(origContent);
			
			
			
			console.log(newContent.html());
			console.log($(bodyString).html());
			$('body').html($(bodyString).html());			
		}
	});
});

не пойму как мне теперь origContent вставить в <div id="mobile-content"> из полученного шаблона и потом полностью заменить содержание <body> в index.html на <body> из шаблона.
может я не туда рою и надо было как то:

document.open("text/html", "replace");        
document.write(response);
document.close();