Как добавить несколько дочерних элементов в DOM и отобразить их, используя ванильный JavaScript?

Question

Я пытаюсь вставить некоторые значки SVG в dom, но SVG (родительский узел) всегда заменяется на использование (дочерний узел). Кто-нибудь поможет мне разобраться?

Исходный код Изображение здесь

Кодовый код здесь

const icons = [
    "html5" ,
    "css3" ,
    "javascript" ,
    "bootstrap" ,
    "sass" ,
    "node" ,
    "mongodb" ,
    "d3" ,
    "react" ,
    "webpack" ,
    "wordpress"
];

const tech_icons = document.querySelector( "#techs__icons" );

icons.forEach( icon=> {

    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 );

} );

Я могу успешно зарегистрировать их в консоли, но они не отображаются в документе.

Я уже добавил его к родительскому узлу (techs_icons), но пока не могу разобраться!

ОБНОВЛЕННЫЙ КОД

icons.forEach( icon=> {

    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 );

} );

Этот снимок работает здесь

Тем не менее не будет отображаться в DOM. На самом деле, они добавляются, потому что когда я наведу их на инспектора, они там, но не видны.

ВТОРОЕ ОБНОВЛЕНИЕ КОДА

Похоже, вам нужно создать какой-то "поддельный" элемент внутри моего svg> use> "поддельного элемента", например shadowRoot, который я на самом деле не понимаю, почему браузер создает такой элемент при импорте файлов SVG!

Я понял это при осмотре элемента и увидел, что браузер автоматически создает эту тень.

SVG

<symbol id="icon-html5">
   <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"/>
 </symbol> 

Проверенный код, показывающий автоматически созданный теневой элемент

const tech_icons = document.querySelector( "#techs__icons" );
const fragment = document.createDocumentFragment();

icons.forEach( icon => {

    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>use>shadowroot>ME)" );

   svg.appendChild( use );

   fragment.appendChild( svg );

});

tech_icons.appendChild( fragment );

Итак, подведем итоги:

1. Добавил результат для цикла forEach () во фрагмент документа, и после его окончания я добавил этот фрагмент как дочерний элемент к реальному элементу DOM (.techs_info)
2. Создала тень и добавила ее в качестве дочернего элемента к элементу использования

Проблема все еще существует, хотя при добавлении тени к элементу использования ни DOM, ни консоль фактически ничего не отображают!

Answer 1

Я играл с вашим Codepen, используя этот исправленный код:

const icons = [
    "html5" ,
    "css3" ,
    "javascript" ,
    "bootstrap" ,
    "sass" ,
    "node" ,
    "mongodb" ,
    "d3" ,
    "react" ,
    "webpack" ,
    "wordpress"
];

icons.forEach( icon=> {
    const tech_icons = document.getElementById( "techs__icons" );

    const svg = document .createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute( "class" , `techs__icon icon icon-${icon}` );

    const use = document .createElementNS("http://www.w3.org/2000/svg", "use");
    use.setAttribute( "xlink:href" , `./src/images/sprites.svg#icon-${icon}` );

    svg.appendChild( use );

    tech_icons.appendChild( svg );

  console.log(tech_icons);
} );

При проверке в консоли элементы SVG создаются и занимают место в DIV в документе, но они кажутся пустыми или невидимыми. Поэтому я виню файл sprites.svg.

Answer 2

Элементы SVG не являются стандартным HTML, поэтому вам необходимо указать пространство имен SVG в методе createElementNS():

const svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' )
const use = document.createElementNS( 'http://www.w3.org/2000/svg', 'use' )

Также в исходном файле SVG вы должны указать пространство имен в атрибуте xmlns:

<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-html5">
   <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"/>
 </symbol> 
</svg>

Answer 3

var mylist = document.getElementById("myList")
list.forEach(item){
var node = document.createElement("LI");                 // Create a <li> node
var textnode = document.createTextNode(item);         // Create a text node
node.appendChild(textnode);                          // Append the text to <li>
mylist.appendChild(node) //Append to<Ul> id="myList"
}