0

I am trying to insert into a DOM element the content of a document fragment (in pure javascript). The working principle is this:

var a = document.getElementById("a"),
    b = document.getElementById("b");

now i place the content of "a" into a document fragment, using a template element

var content = document.createElement("template");
content.innerHTML = a.innerHTML;
content = content.content.cloneNode(true);

now i would like to replace the content of b with the content of content. I tried with a simple b.innerHTML = content.innerHTML;, but it seems like if document fragments doesn't have innerHTML property.
Is this possible to do?

Note: i know this is totally an ineffective way to do the task of making b.innerHTML = a.innerHTML, but obviously this is just a simplification of a bigger task i am managing to do.

Giuppox
  • 1,393
  • 9
  • 35
  • Code examples demonstrating each problem would be helpful. Also it's `getElementById` not `getElementbyId`, I'm not sure how your code would've worked with a typo like that. – Alexandre Elshobokshy Dec 21 '20 at 07:56
  • @IslamElshobokshy thanks for the comment, and for letting me notice the typo (there was not in the actual code). Essentially this is part of a method of an object, similar to jquery's `$`. In this method i would like, having two DOM elements, to replace the inner content of the first, into the second. Sorry if i have not been clear enough. – Giuppox Dec 21 '20 at 08:07

1 Answers1

1

You need to create "clones" and by using the template content property you can then use the innerHTML of a and b into your fragments.

Example:

const a = document.getElementById("a"),
  b = document.getElementById("b");

// note template will only be parsed, to render it use js...

function initTemplate() {

  const container = document.getElementById("container");
  const template = document.getElementById("t");

  // create a first clone with the innerHTML of a...

  const firstClone = template.content.cloneNode(true);
  firstClone.textContent = a.innerHTML;

  // create a second clone with the innerHTML of b...

  const secondClone = template.content.cloneNode(true);
  secondClone.textContent = b.innerHTML;

  // append to the document

  container.appendChild(firstClone);
  container.appendChild(secondClone);


}
<p id="a">Paragraph A</p>
<p id="b">Paragraph B</p>
<button onclick="initTemplate()">Init Template</button>

<br>
<div id="container"></div>

<template id="t">
  
</template>

If you want to check if your browser supports the HTML template element, do something like this:

if ("content" in document.createElement("template") {

   // clone the elements as above and append them to the document

}

Mozilla Docs and Mozilla Docs

rags2riches-prog
  • 1,663
  • 1
  • 10
  • 22
  • hi, thanks for you answer, in the last two lines, what if i don't want to append the clone but to replace the content of the container with the clone? – Giuppox Dec 21 '20 at 10:26
  • another thing, why did you used `document.getElementById("template");`?, i think this should be `document.createElement("template");` – Giuppox Dec 21 '20 at 10:34
  • Read the comment "to render the fragment you need to use js". So if you do not append the fragment "somewhere" how you want to use it? You can use another HTML element to append to but still your clone must be appended or inserted somewhere. document.getElementById("template") assumes you have already created the template so yes, you can replace it with document.createElement("template"). Note you have already the innerHTML of a and b in your fragments so the same code applies for the container innerHTML you want to pass in your fragments. Is this clear? – rags2riches-prog Dec 21 '20 at 10:49
  • yeah thanks, definitely a good explaination. – Giuppox Dec 21 '20 at 10:57
  • @Giuppox take a look at the edited answer. I have included a code snippet to show you how it works. Hopefully is clearer now. – rags2riches-prog Dec 21 '20 at 11:24