Adding a complex SVG to a div in JavaScript

Question

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 five stars 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.

try divElement.innerHTML+=stringifiedVersionOfThatBigThing — The Bomb Squad
– The Bomb Squad, Commented Jan 27, 2021 at 13:22
Please post your HTML (existing div) and your expected output AND what you have tried IN your question. — Mark Schultheiss
– Mark Schultheiss, Commented Jan 27, 2021 at 13:25

Mathieu Tristan · Accepted Answer · 2021-01-27 13:37:05Z

1

There are many options to do that. The easiest way is this one in my opinion.

Updated code:

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;

To keep your paragraph as the last-child, you have to put the svg as first child and then add the existing content (+ document.querySelector('.stars-real-container').innerHTML)

edited Jan 27, 2021 at 13:37

answered Jan 27, 2021 at 13:21

Mathieu Tristan

1445 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

m0ss Over a year ago

it gives this error : js.js:143 Uncaught TypeError: Cannot read property 'innerHTML' of null It's strange that whenever there's an error in a single function in js, the entire code stops working

Mathieu Tristan Over a year ago

Here I use querySelector to get the destination element. You have to pass an argument identifying your destination div. For example if it has the class 'myclass' then pass '.myclass', if it has the id 'myid', pass '#myid'. Can you paste the HTML of your destination element here ?

Mark Schultheiss · Accepted Answer · 2021-01-27 15:41:25Z

This is a "deliberate" solution example where I clone the "star". Might be better ways but this is one way. Note I put the color of the star in CSS to illustrate how to do that also - could be done by using classes to provide a value fo the currentColor. I made mine more "pink" :)

Note I went with the "clone" approach so I could put the svg element in the HTML and not have to muck with string constants for the SVG, harder to maintain etc.

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>

Collectives™ on Stack Overflow

Adding a complex SVG to a div in JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related