Insert/Append 单个子元素到带有香草的多个父元素 javascript

Question

我有 5 div 和 class .faq，如何在每个元素的末尾附加一个新的子元素divs

这是我目前所拥有的：

const faqBoxes = document.querySelectorAll('.faq')
const toggler = document.createElement('i')
toggler.className = `toggler fas fa-chevron-down`
faqBoxes.forEach(box => {
    // box.insertAdjacentHTML('beforeend', toggler) 
        -- returned [object HTMLElement]
    // box.appendChild(toggler) 
        -- but this appends the new element only on the last div
})

为了简单起见，我只添加了一个 单个 div，而不是 5

HTML(插入元素前):

<div class="faq">
    <h3 class="faq-title">How many team members can i invite?</h3>
    <p class="faq-content">You can invite up to 2 additional users on the Free plan. There is no limit on
    team members for the Premium plan.</p>
</div>

HTML(插入元素后):

<div class="faq">
    <h3 class="faq-title">How many team members can i invite?</h3>
    <p class="faq-content">You can invite up to 2 additional users on the Free plan. There is no limit on
    team members for the Premium plan.</p>
    <i class="toggler fas fa-chevron-down></i> <!-- new element-->
</div>

const faqContainer = document.querySelector('.faq-box')
const faqBoxes = document.querySelectorAll('.faq')

const displayIcons = () => {
  const toggler = document.createElement('i')
  toggler.className = `toggler fas fa-chevron-down`
  faqBoxes.forEach(box => {
    // box.insertAdjacentHTML('beforeend', toggler)
    box.appendChild(toggler)
  })
}

window.addEventListener('DOMContentLoaded', displayIcons)

const showFaqContent = event => {
  if (event.target.classList.contains('toggler') || event.target.classList.contains('faq-title')) {
    const parentElem = event.target.parentElement
    parentElem.classList.add('active')
  }
}

faqContainer.addEventListener('click', showFaqContent)

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  font-family: 'poppins';
  background: #ECE9E6;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FFFFFF, #ECE9E6);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FFFFFF, #ECE9E6);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.main-container {
  height: 100%;
  width: 90%;
}

.main-container h1 {
  position: relative;
  color: rgb(54, 94, 128);
}

.main-container h1 i {
  font-size: 1.5rem;
}

.main-container h1::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  background-color: rgba(70, 131, 180, 0.507);
}

.main-container h1::after {
  content: '';
  position: absolute;
  width: 25%;
  height: 3px;
  bottom: 0px;
  left: 0;
  background-color: rgb(70, 131, 180);
}

.faq-box {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 4px 4px 8px hsl(0, 0%, 80%);
}

.faq {
  position: relative;
  padding: .8rem 1rem;
  margin: .5rem;
  border-bottom: .5px solid rgba(221, 221, 221, 0.829);
}

.faq-title {
  color: steelblue;
  font-weight: 400;
  cursor: pointer;
}

.faq.active h3 {
  font-weight: bold;
}

.faq-content {
  display: none;
  font-family: 'nunito', 'sans-serif';
  background-color: rgb(235, 235, 235);
  border-radius: 5px;
  border-left: 5px solid rgb(54, 94, 128);
  margin-top: 10px;
  padding: 1rem;
  font-size: .9rem;
  color: hsl(208, 41%, 20%);
  transition: display .4s ease-in;
}

.faq.active .faq-content {
  display: block;
}

.faq .toggler {
  position: absolute;
  top: 1.25rem;
  right: 1rem;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day-12 Faq Boxes</title>
  <!-- google api/fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
  <!-- custom css -->
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

  <div class="main-container">
    <h1><i class="fas fa-info-circle"></i> FAQ</h1>
    <div class="faq-box hide">
      <div class="faq active">
        <h3 class="faq-title">How many team members can i invite?</h3>
        <p class="faq-content">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>
      </div>
      <div class="faq">
        <h3 class="faq-title">What is the maximux file upload size?</h3>
        <p class="faq-content">No more than 2GB. All files in your account must fit your allotted storage space.</p>
      </div>
      <div class="faq">
        <h3 class="faq-title">How do i reset my password?</h3>
        <p class="faq-content">Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.</p>
      </div>
      <div class="faq">
        <h3 class="faq-title">Can i cancel my subscription?</h3>
        <p class="faq-content">Yes! Send us a message and we’ll process your request no questions asked.</p>
      </div>
      <div class="faq">
        <h3 class="faq-title">Do you provide any additional support?</h3>
        <p class="faq-content">Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
      </div>
    </div>
  </div>

  <!-- fontawesome script -->
  <script src="https://kit.fontawesome.com/39350fd9df.js"></script>
  <!-- Custom Javascript -->
  <script src="main.js" type="text/javascript"></script>
</body>

Answer 1

将您的 createElement 代码添加到循环中，以便在每次迭代时创建一个 new 元素。

const faqBoxes = document.querySelectorAll('.faq');

faqBoxes.forEach(box => {

  const toggler = document.createElement('i');

  toggler.textContent = 'Hallo';
  toggler.className = 'red';

  box.appendChild(toggler);

});

.red { color: red; }

<div class="faq" />
<div class="faq" />
<div class="faq" />

Insert/Append 单个子元素到带有香草的多个父元素 javascript

Insert/Append single child element to multiple parent elements with vanilla javascript

html

javascript

dom

addeventlistener