如何创建一个 Javascript 函数，它会在 HTML 中插入适当的图标？

Question

我想创建一个 JS 函数 （最好是 vanilla JS），每次我创建一个新的 div，它都会将相应的图标附加到 summary.

例如：

创建新的笔记 div 时，它会在 summary
创建新警告 div 时，它会在 summary

.info{
 background: skyBlue;
 }
 
 .warning{
 color: red; 
  background: pink;
 }
 
 .note{
 background: gold;
 }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 

<div class = " info"> 
<details>
  <summary>Info</summary>
  <p>Some info</p>
</details>
</div> 

<div class = " warning"> 
<details>
  <summary>Warning</summary>
  <p>Notification</p>
</details>
</div> 

<div class = " info"> 
<details>
  <summary>Info</summary>
  <p>Another info</p>
</details>
</div> 

<div class = " note"> 
<details>
  <summary>Note</summary>
  <p>Some note</p>
</details>
</div> 

<hr>
<p> How I want the end result to look </p>

<div class = " info"> 
<details>
  <summary>Info <i class="fas fa-info"></i></summary>
  <p>Some info</p>
</details>
</div> 

<div class = " warning"> 
<details>
  <summary>Warning <i class="fas fa-exclamation-circle"></i></summary>
  <p>Notification</p>
</details>
</div> 

<div class = " info"> 
<details>
  <summary>Info <i class="fas fa-info"></i></summary>
  <p>Another info</p>
</details>
</div> 

<div class = " note"> 
<details>
  <summary>Note <i class="far fa-sticky-note"></i></summary>
  <p>Some note</p>
</details>
</div>

Answer 1

有一个 cards-container，您可以在其中附加不同的卡片，并创建一个 newCard 函数来实际制作您要附加的元素。

const classes = {
  note: 'far fa-sticky-note',
  info: 'fas fa-info',
  warning: 'fas fa-exclamation-circle'
}

const container = document.querySelector('.cards-container')

function newCard(type, content) {
  const cardDiv = document.createElement('div')
  cardDiv.classList = `card ${type}`
  cardDiv.innerHTML = `
    <details>
      <summary>${type[0].toUpperCase()}${type.slice(1).substring(0)} <i class="${classes[type]}"></i></summary>
      <p>${content}</p>
    </details>`
  container.appendChild(cardDiv)
}

newCard('info', 'dis be a cool info')
newCard('warning', 'warning. danger! danger!')

.info{
 background: skyBlue;
 }
 
 .warning{
 color: red; 
  background: pink;
 }
 
 .note{
 background: gold;
 }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 

<div class="cards-container">
</div>

使用以下代码，您可以将图标添加到已经存在的卡片中。

您可以 select 所有“卡片”（每张卡片都被赋予 class 名称 card）元素，并通过修改摘要的 innerHTML.

const classes = {
  note: 'far fa-sticky-note',
  info: 'fas fa-info',
  warning: 'fas fa-exclamation-circle'
}

const cards = [...document.querySelectorAll('.card')]

cards.map(el => el.querySelector('summary').innerHTML += " <i class=\"" + classes[el.classList[1]] + "\"></i>")

.info{
 background: skyBlue;
 }
 
 .warning{
 color: red; 
  background: pink;
 }
 
 .note{
 background: gold;
 }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 

<div class = "card info"> 
<details>
  <summary>Info</summary>
  <p>Some info</p>
</details>
</div> 

<div class = "card warning"> 
<details>
  <summary>Warning</summary>
  <p>Notification</p>
</details>
</div> 

<div class = "card info"> 
<details>
  <summary>Info</summary>
  <p>Another info</p>
</details>
</div> 

<div class = "card note"> 
<details>
  <summary>Note</summary>
  <p>Some note</p>
</details>
</div>

如何创建一个 Javascript 函数，它会在 HTML 中插入适当的图标？

How to create a Javascript function where it'll insert appropriate icons in HTML?

html

javascript

dom

font-awesome