CODEWITHSUNDEEP
htmljavascript
skillz21
skillz21

Reputation: 196

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

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?

Upvotes: 1

Views: 557

Answers (2)

Baconn
Baconn

Reputation: 1

Other way that I found out is to, basicaly create your html code and insert into a template, like this:

<template id="template1">
    <p>Hello world!</p>
</template>
//Then create this function in your script
function InjectLarge(){
     var ht = document.getElementById("template1").innerHTML; //Retrieves the code from the template

     document.getElementById("PlaceToPutContent").innerHTML = ht; //Injects wherever you want

}


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

This way you dont need any aditional functions, you simply retrieve the template you want then insert into the place you want base on the ID.

Upvotes: 0

D. Pardal
D. Pardal

Reputation: 6597

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/">

Upvotes: 1

Related Questions