使用vanilla javascript將單個子元素插入/附加到多個父元素
[英]Insert/Append single child element to multiple parent elements with vanilla javascript
問題描述
我有5 div的帶班.faq ，如何將一個新的子元素在每年年底追加div小號
這是我到目前為止：
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>
1 個解決方案
解決方案1
1 已采納 2021-07-16 10:55:08
將createElement代碼添加到循環中，以便在每次迭代時創建一個新元素。
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" />
如何使用 vanilla javascript 在 DOM 中附加多個子元素並顯示它們？
[英]How to append multiple child elements in the DOM and display them, using vanilla javascript?
在 Vanilla JavaScript 中過濾掉父元素中的所有子元素
[英]Filter out all child elements from parent in Vanilla JavaScript
如何將 append 多個 img-child 元素添加到一個帶有 JS 的 DOM 元素中？
[英]how to append multiple img-child elements to a DOM element with JS?
如何通過追加for循環將多個元素插入到一個元素中？
[英]How to insert multiple elements into one element via append in a for loop?
jQuery / JavaScript-計算多個父元素中的子元素
[英]jQuery/JavaScript - Counting child elements in multiple parent elements
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.