javascript—动态添加html节点的代码在chrome和safari中有效,但在firefox中无效

1zmg4dgp  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(162)

我正在使用以下代码向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 神秘地消失了。

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题