複数のサブエレメントを動的に挿入する[JS].
6764 ワード
複数のサブエレメントを動的に挿入します。
Intro
前回は似たような構造のコードを書いてみましたが、まだ慣れていないので、単独で位置決めして整理したいと思います.そこで、困ったコードをまとめて個別に整理する習慣を身につけたいと思います.😊
要求
data−max−ratingコンテナ要素においてstar要素からなるstar rating要素を動的に生成する.生成されたstar要素の数値はdata-max-ratingコンテナ要素のdata値を参照します.
html<div class="star-rating" data-max-rating="5"></div>
<div class="star-rating" data-max-rating="4"></div>
<div class="star-rating" data-max-rating="2"></div>
jsconst $containers = [...document.querySelectorAll('.star-rating')];
$containers.forEach( $container => {
const maxRating = $container.getAttribute('data-max-rating')
const newNode = document.createDocumentFragment();
for (let i = 0; i < maxRating; i++) {
const star = document.createElement('i')
star.classList.add('bx', 'bxs-star')
star.setAttribute('data-star', `${ i+1 }`)
newNode.appendChild(star)
}
$container.appendChild(newNode)
})
デフォルトの背景
注意:MDN
1. Document.createDocumentFragment()
新しい空の
<div class="star-rating" data-max-rating="5"></div>
<div class="star-rating" data-max-rating="4"></div>
<div class="star-rating" data-max-rating="2"></div>const $containers = [...document.querySelectorAll('.star-rating')];
$containers.forEach( $container => {
const maxRating = $container.getAttribute('data-max-rating')
const newNode = document.createDocumentFragment();
for (let i = 0; i < maxRating; i++) {
const star = document.createElement('i')
star.classList.add('bx', 'bxs-star')
star.setAttribute('data-star', `${ i+1 }`)
newNode.appendChild(star)
}
$container.appendChild(newNode)
})DocumentFragmentは非常に小さなドキュメントオブジェクトであり、親オブジェクトはありません.詳細については、次の図を参照してください.
2.getAttribute():要素のデータ属性値の検索
この属性に指定された値
Reference
この問題について(複数のサブエレメントを動的に挿入する[JS].), 我々は、より多くの情報をここで見つけました https://velog.io/@0seo8/JS-자식요소-여러개-삽입하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol