Adding a complex SVG to a div in JavaScript

January 27, 2021 by admin

I have this 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>

This is a blue star. I want to do add an arbitrary number of these stars to an existing div using JavaScript.
How could I do it?

Update :
This is the existing div (it already has one star and a short paragraph):

 <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>

Its CSS:

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

}

The idea is to have stars to show the popularity of something. I have not ever created SVG elements with JavaScript. I checked several other stackoverflow threads like This. But it was a simple SVG.