HTML element generated with javascript are not shown

Question

I'm trying to generate a "circle of fifth" with html/css/javascript I'm just trying to reproduce this tutorial: https://blog.logrocket.com/interactive-svg-circle-of-fifths/

I'm using the astro framework, but I don't think my issue come from this detail. Nonetheless, I'm using 4 components:

• a Slice component, which contains the 3 black background portions of the slice and the 3 others components
• a TextInner Component, which is the text in the inner portion of the slice (the minor key)
• a TextMiddle component, which is the text in the middle portion of a slice (the major key)
• a Staff Component, which is the representation of a music staff, the outter portion of a slice

My problem is that I can't to properly display the sharps and flats on the staff dynamically.

If I do:

<g id={staffId}>
  <use width="30" href="#staff"></use>
  <use width="2" href="#sharp" class="cf-sharp-1"></use>
  <use width="2" href="#sharp" class="cf-sharp-2"></use>
</g>

I get :

With this code in the browser inspector

But, if I comment the two "sharp" elements and try two generate them programatically with javascript, the html code generated seems correct, but the sharps are not displayed. here is the code of the component:

---
import "../styles/global.css";

const { sliceIndex } = Astro.props;
const { alteration } = Astro.props;
const { alterationCount } = Astro.props;
const staffId = "staff-" + sliceIndex;
---

<g id={staffId}>
  <use width="30" href="#staff"></use>
  <!-- <use width="2" href="#sharp" class="cf-sharp-1"></use> -->
  <!-- <use width="2" href="#sharp" class="cf-sharp-2"></use> -->
</g>

<script define:vars={{ sliceIndex, alteration, alterationCount }}>
const size = 300; /* diameter / viewBox */
const radius = size / 2;
const angle = sliceIndex * (360 / 12);

function posXY(center, radius, angle) {
  return [
    center + radius * Math.cos((angle * Math.PI) / 180.0),
    center + radius * Math.sin((angle * Math.PI) / 180.0),
  ];
}

const [x, y] = posXY(radius, 125, angle);

const staffId = "staff-" + sliceIndex;
var staff = document.getElementById(staffId);
const xStaff = x - 15;
const yStaff = y - radius;
const translateStaff = "translate(" + xStaff + "," + yStaff + ")";

console.log(alterationCount);
console.log(alteration);
staff.setAttribute("transform", translateStaff);
for (let i = 1; i <= alterationCount; i++) {
  const alterationSymbol = document.createElement("use");
  alterationSymbol.setAttribute("width", 2);
  if (alteration == "sharp") {
    alterationSymbol.setAttribute("href", "#sharp");
    alterationSymbol.setAttribute("class", "cf-sharp-" + i);
  } else {
    alterationSymbol.setAttribute("xlink:href", "#flat");
    alterationSymbol.setAttribute("class", "cf-flat-" + i);
  }
  staff.appendChild(alterationSymbol);
}
</script>

Here is the generated code where we can see that the two sharps (for that slice) are correctly generated (the same html elements are generated):

But here is what is displayed:

None of the sharps/flats are displayed. I don't understand why, since the generated html elements in the inspector are the same.

Here's the full github project: https://github.com/0inp/circleoffifth

Thanks a lot in advance for the help !

EDIT: the SVG elements are already in my document as shown in this image:

That's why I'm using the <use> html tag.

Answer 1

I understand you are trying to create SVG elements. Although SVG is allowed to be embedded directly into HTML, you should understand that it is not HTML, so when you use document.createElement you create HTML elements and of course SVG does not care about them. Use document.createElementNS to create a namespaced element. Everything you do related to SVG should always use document.createElementNS instead of document.createElement.