What are some ways to inject a large amount of HTML into a <div>?

Issue

I'm pretty new to web design, and I'm trying to build a dashboard for a project. So far, I've got my UI looking like I want it to. It basically consists of a header bar, with a navigation bar on the left side with some options that the user can click on. I want a click on each item to change the content in the central area. The way I thought of was simply to use:

document.getElementById("central text element").innerHTML = "the HTML I want to change it to";

This approach, functionally, does everything I would like. The only problem is, the content I would like to insert is not short. For each of my options, I basically have to create individual HTML documents that I could edit the content in, then run it through a converter like this: https://tomeko.net/online_tools/cpp_text_escape.php?lang=en, then copy it in. As you can probably understand, this method is not very streamlined, as every time I want to make some changes to the code, I have to copy that chunk of code into this converter then paste it into the JavaScript function.

Is there a better way to achieve what I'm trying to do here?

Solution

There are several ways to do this:

The <template> element

If you want all the content to be loaded in the page, you can use <template>.

const content1 = document.getElementById("content1").content,
content2 = document.getElementById("content2").content,
div = document.getElementById("div");

function changeContent(content) {
  const nodes = [...div.childNodes];
  for (let node of nodes) {
    node.remove();
  }
  div.appendChild(content.cloneNode(true));
}

document.getElementById("add-content1-btn").addEventListener("click", () => {
  changeContent(content1);
});
document.getElementById("add-content2-btn").addEventListener("click", () => {
  changeContent(content2);
});

#div {
  border: 1px solid black
}

<template id="content1">
  <p>
    This is some HTML content. It won't be rendered unless you use JavaScript.
    It supports <strong>markup</strong>, of course.
  </p>
</template>
<template id="content2">
  <p>
    This is another HTML content.
  </p>
  <ul>
    <li>Yes,</li>
    <li>it</li>
    <li>supports</li>
    <li>lists.</li>
  </ul>
</template>

<button id="add-content1-btn">Add content1 to div</button> <button id="add-content2-btn">Add content2 to div</button>

<div id="div"></div>

Loading pages with <iframe>

You can use <iframe> to load another page inside a page. This is a great approach if the content is really big, because the main page won't need to load that content unless requested. You can change the src attribute of the <iframe> dynamically to load different pages. Note that the page you load needs to be a full page, with its own CSS and all.

<iframe src="https://example.com/">

Answered By - D. Pardal