Estoy usando una combinación de .createElementNS() y .appendChild() para agregar elementos circulares y sus elementos principales SVG al DOM. Sin embargo, cuando creo un elemento de text relacionado con el elemento del círculo, se crea un nodo de texto en el DOM pero no se muestra. ¿Cómo hago para que mi nodo de texto se muestre sobre mi elemento de círculo SVG?
Esto es lo que crea mi JavaScript seguido del SVG que se representa en el DOM.
document.addEventListener('DOMContentLoaded', () => { let digitKeys = 10; for (let i = 0; i < digitKeys; i++) { const textNode = document.createTextNode(i); // last/deepest child const textElement = document.createElement('text'); // first/deepest parent textElement.setAttribute('color', 'white'); textElement.setAttribute('z-index', 50); textElement.setAttribute('alignment-baseline', "middle"); textElement.setAttribute('text-anchor', "middle"); textElement.setAttribute('x', 8); textElement.setAttribute('y', 2); textElement.setAttribute('font-size', 50); textElement.appendChild(textNode); // append deepest child to first parent const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle') //svg elements require createElementNS() (NS = namespace) instead of createElement(); circle.setAttribute('class', 'digitKeys'); circle.setAttribute('cx', 50) circle.setAttribute('cy', 50) circle.setAttribute('r', 33) circle.setAttribute('fill', 'steel') // sibling of first parent circle.appendChild(textElement); console.log(circle) <svg id="circlesSVG" width="100" height="100"> <circle class="digitKeys" cx="50" cy="50" r="33" fill="steel"> <text color="white" z-index="50" alignment-baseline="middle" text-anchor="middle" x="8" y="2" font-size="50"> 0 </text> </circle> </svg>