JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:330px; width:1100px; background:#313131; margin:0 auto; ">
  <svg id='svg_main' height="330" width="1100"></svg>
</div>

JavaScript

var svgid = document.getElementById('svg_main');
var str_lne = 60;
var data = '<path id="lineAB" d="M 50 ' + str_lne + ' L 1050 ' + (str_lne) + '" transform="translate(0.5,0.5)"  stroke="#707073" fill="none"  storke-width="1px" opacity="1" ></path>';
console.log('SVG\'s NS before insertion: ' + svgid.namespaceURI);
svgid.insertAdjacentHTML('beforeend', data);
console.log('SVG\'s NS after insertion: ' + svgid.namespaceURI);
pathEl = document.getElementById('lineAB');
console.log('PATH\'s NS (after insertion): ' + pathEl.namespaceURI);