I have a requirement where I need to implement a link in a Table of Contents that, upon clicking, should replace the existing content of one div on a page with the content of another div on a different page. My goal is to accomplish this using only JavaScript.
Below are the code snippets from the two pages:
Original Page (to receive new content)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type= "text/javascript">
function loadContent(targetPage){
document.getElementById("content").innerHTML = "New text!"; //I am looking for a way to fetch the contents of a div from another HTML file
}
</script>
</head>
<body>
<div id="link">
<a href="#" onClick="loadContent("newContent.html")">Click Me.</a>
</div>
<p></p>
<div id="content">
<p>This is the original content.</p>
</div>
</script>
</body>
</html>
Source Page
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Content Source</title>
</head>
<body>
<div id="newContent">
<p>New Content:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Est velit egestas dui id ornare arcu. Ultricies leo integer malesuada nunc vel. Risus sed vulputate odio ut. Senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</body>
</html>