title: How to append multiple child elements in the DOM and display them, using vanilla javascript?
body: <p>I am trying to insert some SVG icons in the dom but the SVG(parent node) is always being replaced by the use(child node). Anyone help me figure it out?</p>
  
  <p><a href="https://i.imgur.com/oEANfWm.png" rel="nofollow noreferrer">Source code Image here</a></p>
  
  <p><a href="https://codepen.io/evangeloskolimitras/pen/oOExEY?editors=1011" rel="nofollow noreferrer">Codepen here</a></p>
  
  <pre><code>const icons = [
      "html5" ,
      "css3" ,
      "javascript" ,
      "bootstrap" ,
      "sass" ,
      "node" ,
      "mongodb" ,
      "d3" ,
      "react" ,
      "webpack" ,
      "wordpress"
  ];
  
  const tech_icons = document.querySelector( "#techs__icons" );
  
  icons.forEach( icon=&gt; {
  
      const svg = document.createElement( "svg" );
      const use = document.createElement( "use" );
  
          svg.setAttribute( "class" , `techs__icon icon icon-${icon}` );
      use.setAttribute( "href" , `./src/images/sprites.svg#icon-${icon}` );
  
      tech_icons.appendChild( use ).appendChild( use );
  
  } );
  </code></pre>
  
  <p>I can successfully log them in the console but they don't seem to appear on the document. </p>
  
  <p>I appended it already to the parent node (techs_icons) but can't figure it out at this point!</p>
  
  <blockquote>
    <p><strong>UPDATED CODE</strong></p>
  </blockquote>
  
  <pre><code>icons.forEach( icon=&gt; {
  
      const tech_icons = document.querySelector( "#techs__icons" );
  
      const svg = document.createElement( "svg" );
      svg.setAttribute( "class" , `techs__icon icon icon-${icon}` );
      const use = document.createElement( "use" );
      use.setAttribute( "href" , `./src/images/sprites.svg#icon-${icon}` );
  
      svg.appendChild( use );
  
      tech_icons.appendChild( svg );
  
  } );
  </code></pre>
  
  <p><a href="https://imgur.com/a/Sc5GfVy" rel="nofollow noreferrer">This snapshot seems to work here</a></p>
  
  <p>Still won't be displayed in the DOM. Actually, they are being appended because when I hover them over in the inspector they are there but not visible.</p>
  
  <blockquote>
    <p><strong>SECOND UPDATE TO THE CODE</strong></p>
  </blockquote>
  
  <p>It looks like you need to create some kind of "fake" element inside my svg>use>"fake element", like a shadowRoot which i actually do not understand why the browser creates such an element when importing SVG files!</p>
  
  <p>I figured it out when inspecting the element and saw that the browser actually creates automatically that shadow.</p>
  
  <p><strong><em>SVG</em></strong></p>
  
  <pre><code>&lt;symbol id="icon-html5"&gt;
     &lt;path d="M2 0h28l-2.547 28.751-11.484 3.249-11.419-3.251-2.551-28.749zM11.375 13l-0.309-3.624 13.412 0.004 0.307-3.496-17.568-0.004 0.931 10.68h12.168l-0.435 4.568-3.88 1.072-3.94-1.080-0.251-2.813h-3.479l0.44 5.561 7.229 1.933 7.172-1.924 0.992-10.876h-12.789z"/&gt;
   &lt;/symbol&gt; 
  </code></pre>
  
  <p><a href="https://imgur.com/a/blBJsEj" rel="nofollow noreferrer">Inspected code showing the auto created shadow element</a></p>
  
  <pre><code>const tech_icons = document.querySelector( "#techs__icons" );
  const fragment = document.createDocumentFragment();
  
  icons.forEach( icon =&gt; {
  
      const svg = document.createElement( "svg" );
      const use = document.createElement( "use" );
      let shadow = use.attachShadow( { mode : open } );
  
      svg.setAttribute( "class" , `techs__icon icon icon-${icon}` );
      use.setAttribute( "href" , `./src/images/sprites.svg#icon-${icon}` );
      shadow.appendChild( "I am a: child element inside shadowroot (svg&gt;use&gt;shadowroot&gt;ME)" );
  
     svg.appendChild( use );
  
     fragment.appendChild( svg );
  
  });
  
  tech_icons.appendChild( fragment );
  </code></pre>
  
  <p>So at this point to recap:</p>
  
  <ol>
  <li>Added the result for the forEach() loop to a document fragment and after that loop ended i appended that fragment as a child to the real DOM element (.techs_info)</li>
  <li>Created a shadow and also append it as a child to the use element</li>
  </ol>
  
  <p>Problem still exists, while when appending the shadow to the use element neither the DOM or the console does not actually display anything!</p>