JSFiddle - React, Tailwind, and code Playground

by Jeremy Banks

HTML

<div id="container" xmlns:xlink="http://www.w3.org/1999/xlink"></div>

JavaScript

var NS_SVG = "http://www.w3.org/2000/svg",
    NS_XLINK = "http://www.w3.org/1999/xlink",
    
    container = document.getElementById( "container" ),
    
    a    = document.createElementNS( NS_SVG, "a" ),
    text = document.createElementNS( NS_SVG, "text" );

a.setAttributeNS( NS_XLINK, "cow", "http://stackoverflow.com/" );
a.setAttributeNS( NS_SVG, "moo", "http://stackoverflow.com/" );

text.textContent = "Hello, Stack!";
text.setAttribute( "x", 12.5 );
text.setAttribute( "y", 37.5 );
text.setAttribute( "font-size", 25 );

container.appendChild( a );
a.appendChild( text ) ;



console.log("properties of <svg:a>");
console.log( a.nodeName );
console.log( a.namespaceURI );
console.log( a.localName );
console.log( a.nodeName );

var hrefAttribute = a.attributes[ 0 ];
console.log("properties of xlink:href attribute of <svg:a>");
console.log( hrefAttribute.nodeName );
console.log( hrefAttribute.namespaceURI );
console.log( hrefAttribute.localName );
console.log( hrefAttribute.nodeName );

console.log(container.innerHTML)