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, Jan 27 '21 at 13:22
Please post your HTML (existing div) and your expected output AND what you have tried IN your question. — Mark Schultheiss, Jan 27 '21 at 13:25

Mathieu Tristan · Accepted Answer · 2021-01-27T13:37:05.530

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 '21 at 13:37

answered Jan 27 '21 at 13:21

Mathieu Tristan

129
5

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 – m0ss Jan 27 '21 at 13:23
1

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 ? – Mathieu Tristan Jan 27 '21 at 13:28

score 1 · Answer 2 · answered Jan 27 '21 at 15:41

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>

Adding a complex SVG to a div in JavaScript

2 Answers2