字体很棒的图标和面板在使用 JS 时无法正确显示

Question

I'm trying to create HTML elements dynamically with JS. However panels and font awesome icons are not shown properly when doing so.

This is the HTML code I want to create dynamically with JS.

<div class="row" id="row">
    <div class="col">
        <div class="panel-custom border colorized">
            <div class="fa fa-chevron-right right-arrow"></div>
        </div>
    </div>
</div>

My JS code:

  let row = document.getElementById('row');
  let col = document.createElement('col');
  let panelCustom = document.createElement('panel-custom');
  let fa = document.createElement('fa');

  panelCustom.classList.add("colorized");
  panelCustom.classList.add("border");
  fa.classList.add("fa-chevron-right");
  fa.classList.add("right-arrow");

  row.appendChild(col);
  col.appendChild(panelCustom);
  panelCustom.appendChild(fa);

Answer 1

You can try this ( it should work as expected ) :

 let row = document.createElement('div'); row.className = "row"; let col = document.createElement('div'); col.className = "col"; let panelCustom = document.createElement('div'); panelCustom.className = "panel-custom colorized border"; let fa = document.createElement('i'); fa.className = "fa fa-chevron-right right-arrow"; panelCustom.appendChild(fa); col.appendChild(panelCustom); row.appendChild(col); document.body.appendChild(row);

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>

Answer 2

You can't actually create elements of type "col", "panel-custom" or "fa", like you're trying to here:

let col = document.createElement('col');
let panelCustom = document.createElement('panel-custom');
let fa = document.createElement('fa');

These are not valid HTML elements. In fact, they should be <div> elements as in your HTML sample. Create <div> elements instead:

let col = document.createElement('div');
let panelCustom = document.createElement('div');
let fa = document.createElement('div');

Then add the required classes:

panelCustom.classList.add("panel-custom");
panelCustom.classList.add("colorized");
panelCustom.classList.add("border");
// etc.