javascript - 动态添加 HTML 节点的代码适用于 Chrome 和 Safari，但不适用于 Firefox

Question

我正在使用以下代码将节点动态添加到 html 文档：

HTML：

    <section>

           <div class="labelDiv ____ labelDivTextNeighborhoodTips">
                   <div class="filterDiv publicTransportationTips filterDivTextNeighborhoodTips">
                          <input type="text" name="publicTransportationTips"></input>
                           <span>1.</span>
                    </div>
            </div>
   <section>

Javascript：

const squareAddButton = document.getElementsByClassName('cls-1')[0];
const svgTips = document.getElementById('Layer_2');

const labelDivsTips = document.getElementsByClassName('labelDivTextNeighborhoodTips');



function addButtonHover() {

    squareAddButton.style.fill = '#FFCCCC';
  }

function addButtonMouseout() {
    squareAddButton.style.fill = 'none'
}

function clickAddButton() {

   var lastLabelDiv = labelDivsTips[labelDivsTips.length - 2];
   var lastFilterDiv = lastLabelDiv.children[0];
   let spanNumber = parseInt(lastFilterDiv.children[1].innerHTML) + 1;


   if(spanNumber <=5){

       spanNumber =spanNumber.toString() +'.'

       var parentElement = lastLabelDiv.parentNode

       var labelDiv = document.createElement('div');
       labelDiv.setAttribute('class', 'labelDiv ____ labelDivTextNeighborhoodTips show');

       var filterDiv = document.createElement('div');
       filterDiv.setAttribute('class', "filterDiv publicTransportationTips filterDivTextNeighborhoodTips");

       var input = document.createElement('input');
       input.setAttribute('type', "text");
       input.setAttribute('name', "publicTransportationTips");


       var span = document.createElement('span');
       var textos = document.createTextNode(spanNumber);

       span.appendChild(textos);
       filterDiv.appendChild(input);
       filterDiv.appendChild(span);
       labelDiv.appendChild(filterDiv)

       parentElement.insertBefore(labelDiv, lastLabelDiv.nextSibling);

    }

  }

  svgTips.addEventListener('mouseover', addButtonHover);
  svgTips.addEventListener('mouseout', addButtonMouseout);
  svgTips.addEventListener('click', clickAddButton)

此代码在 Google Chrome 和 Safari 中完美运行，但在 Firefox 中，当单击按钮时span，倒数第二个元素内的文本节点div神秘地消失了。

标签： javascripthtmldomcross-browser