JS动态创建SVG后JsBarcode不显示，如何批量生成可打印条码？

我需要将同一条码多次显示以用于打印，但是通过JavaScript动态创建<svg>标签并调用JsBarcode生成条码后，条码无法显示。

我的代码如下：

$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, {
           
  }
}

此时没有条码显示，但如果预先在HTML文件中创建<svg>标签，条码就能正常显示，不过这种方式无法灵活控制需要打印的条码数量：

<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>

请问如何实现同一条码的批量生成？

问题根源有两点：

1. showBarcode函数存在语法错误：JsBarcode调用的配置对象未闭合，函数本身也缺少闭合括号，导致代码无法正常执行。
2. 动态创建SVG后使用ID选择器查找元素，可能存在DOM更新延迟的问题，直接传入DOM节点给JsBarcode是更可靠的方式。

修正后的完整代码如下：

$scope.showBarcode = function (sampleCode, number) {
  // 先清空容器，避免重复生成条码
  const container = document.getElementById("printPageBarcode");
  container.innerHTML = "";

  for (let i = 1; i <= number; i++) {      
    const svgNode = document.createElement("svg");
    svgNode.setAttribute("id", "barcode" + i);
    const brNode = document.createElement("br");

    container.appendChild(svgNode);
    container.appendChild(brNode);
    
    // 直接传入创建好的SVG节点，无需通过ID查找
    JsBarcode(svgNode, sampleCode.SampleCode, {
      height: 40,
      displayValue: true
    });
  }
}

说明： #

• 新增容器清空逻辑，避免多次调用函数时条码重复累积。
• 直接将动态创建的SVG节点传给JsBarcode，跳过ID选择器查找，避免DOM渲染延迟问题。
• 补全所有语法缺失的括号，保证代码能正常解析执行。

这样修改后，即可根据传入的number参数灵活生成对应数量的条码，且能正常显示。

内容的提问来源于stack exchange，提问作者Gacom111haaa