在 JavaScript 中将复杂的 SVG 添加到 div

Question

我有这个 SVG：

<svg style="fill:#1780df; color: #1780df; " xmlns="http://www.w3.org/2000/svg" width=".8em"
height=".8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"
data-v-41e50536="" data-v-50fd7d5a="">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 
8.26 12 2"
data-v-41e50536="" data-v-50fd7d5a=""></polygon>
                        </svg>

这是一颗蓝星。我想使用 JavaScript 将任意数量的这些星星添加到现有的 div 中。 我该怎么办？

更新： 这是现有的 div（它已经有五颗星和一小段）：

 <div class="stars-real-container" id="dsc1">
                        <svg style="fill:#1780df; color: #1780df; margin-right: 6px; "
                             xmlns="http://www.w3.org/2000/svg" width=".8em" height=".8em" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                             stroke-linejoin="round" class="feather feather-star" data-v-41e50536=""
                             data-v-50fd7d5a="">
                            <polygon
                                    points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
                                    data-v-41e50536="" data-v-50fd7d5a=""></polygon>
                        </svg>
                        <svg style="fill:#1780df; color: #1780df; " xmlns="http://www.w3.org/2000/svg" width=".8em"
                             height=".8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                             stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"
                             data-v-41e50536="" data-v-50fd7d5a="">
                            <polygon
                                    points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
                                    data-v-41e50536="" data-v-50fd7d5a=""></polygon>
                        </svg>
                        <svg style="fill:#1780df; color: #1780df; " xmlns="http://www.w3.org/2000/svg" width=".8em"
                             height=".8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                             stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"
                             data-v-41e50536="" data-v-50fd7d5a="">
                            <polygon
                                    points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
                                    data-v-41e50536="" data-v-50fd7d5a=""></polygon>
                        </svg>
                        <svg style="fill:#1780df; color: #1780df; " xmlns="http://www.w3.org/2000/svg" width=".8em"
                             height=".8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                             stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"
                             data-v-41e50536="" data-v-50fd7d5a="">
                            <polygon
                                    points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
                                    data-v-41e50536="" data-v-50fd7d5a=""></polygon>
                        </svg>
                        <svg style="fill:#1780df; color: #1780df; " xmlns="http://www.w3.org/2000/svg" width=".8em"
                             height=".8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                             stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"
                             data-v-41e50536="" data-v-50fd7d5a="">
                            <polygon
                                    points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
                                    data-v-41e50536="" data-v-50fd7d5a=""></polygon>
                        </svg>
                        <p class="number-of-comments" id="dc1">(۱۲ نظر )</p>
                    </div>

它的 CSS：

.stars-real-container {
height: 100%;
width: 50%;
display: flex;
flex-direction: row-reverse;
justify-content: space-around;

}

这个想法是用星星来显示某物的受欢迎程度。我从未使用 JavaScript 创建 SVG 元素。我检查了其他几个 stackoverflow 线程，例如This。但它是一个简单的 SVG。

Answer 1

有很多选择可以做到这一点。我认为最简单的方法是这个。

更新代码：

document.querySelector('.stars-real-container').innerHTML = '<svg style="fill:#1780df; color: #1780df; " xmlns="http://www.w3.org/2000/svg" width=".8em" height=".8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"  lass="feather feather-star" data-v-41e50536="" data-v-50fd7d5a=""><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" data-v-41e50536="" data-v-50fd7d5a=""></polygon></svg>' + document.querySelector('.stars-real-container').innerHTML;

要将您的段落保留为最后一个孩子，您必须将 svg 作为第一个孩子，然后添加现有内容 (+ document.querySelector('.stars-real-container').innerHTML)

Answer 2

这是一个“故意”的解决方案示例，我在其中克隆了“星号”。可能是更好的方法，但这是一种方法。请注意，我将星的颜色放在 CSS 中以说明如何做到这一点 - 可以通过使用类来为 currentColor 提供值来完成。我让我的更“粉红色”:)

请注意，我采用了“克隆”方法，因此我可以将 svg 元素放入 HTML 中，而不必为 SVG 处理字符串常量、更难维护等。

let howMany = 4;
let prettystar = document.getElementById("star-container").querySelector('svg');
let targetElement = document.querySelector("#star-target").querySelector('.star-me');
for (let step = 0; step < howMany; step++) {
  let pclone = prettystar.cloneNode(true);
  console.log(step)
  targetElement.appendChild(pclone);
}

.star-me {
     color: #df80df;
}

#star-container {
  display: none;
}

<div id="star-container">
  <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width=".8em" height=".8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star" data-v-41e50536=""
    data-v-50fd7d5a="">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 
8.26 12 2"
data-v-41e50536="" data-v-50fd7d5a=""></polygon></svg>
</div>
<div id="star-target"><span>Please make me a star!</span>
  <span class="star-me"></span>
</div>