JaBarcode not show in div generate by JS

Question

I have a barcode and want to display it multiple times to print it out.

When I do add the tag svg from javascript, after generating barcode they don't show up.

$scope.generatePrintBarcodePage = function (sampleCode, number) {
    $scope.barCodePrint = [];
    var i;
    for (i = 1; i <= number; i++) {
        JsBarcode("#barcode" + i, sampleCode, {
            height: 40,
            displayValue: true
        });
    }
}


$scope.showBarcode = function (sampleCode, number) {
  for (i = 1; i <= number; i++) {      
    const node = document.createElement("svg");
    node.setAttribute("id", "barcode" + i);

    document.getElementById("printPageBarcode").appendChild(node);
    
    JsBarcode("#barcode" + i, sampleCode.SampleCode, {
           
  }
}

Then no barcode is displayed.

But if I pre-create the tag svg on the html file, they are displayed, but if I create it, I have no control over how many barcodes I want to print.

<div id="printPageBarcode" style=" height: 500px;">
    <svg id="barcode1"></svg> <br />
    <svg id="barcode2"></svg>  <br />
    <svg id="barcode3"></svg>  <br />
    <svg id="barcode4"></svg>  <br />
    <svg id="barcode5"></svg> <br />
</div>

How can I add the same barcode multiple time?

Answer 1

SVG elements cannot be dynamically created using createElement in the same way as HTML elements. If you wish to generate a svg, use the createElementNS function.

function showBarcode (sampleCode, number) {
  for (let i = 1; i <= number; i++) {      
    let node = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    node.setAttribute("id", "barcode" + i);
    document.getElementById("printPageBarcode").appendChild(node); 
    
    JsBarcode("#barcode" + i, sampleCode, {
            height: 40,
            displayValue: true
    });
  }
}

showBarcode("test", 5);

<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>

<div id="printPageBarcode">

</div>