我正在使用以下代码向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
神秘地消失了。
暂无答案!
目前还没有任何答案,快来回答吧!