字體很棒的圖標和面板在使用 JS 時無法正確顯示

Question

我正在嘗試使用 JS 動態創建 HTML 元素。 但是，這樣做時面板和字體真棒圖標無法正確顯示。

這是我想用 JS 動態創建的 HTML 代碼。

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

我的JS代碼：

  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

你可以試試這個（它應該按預期工作）：

 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

您實際上無法創建“col”、“panel-custom”或“fa”類型的元素，就像您在這里嘗試的那樣：

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

這些不是有效的 HTML 元素。 實際上，它們應該是 HTML 示例中的<div>元素。 改為創建<div>元素：

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

然后添加所需的類：

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