试图在另一个标签之前插入另一个跨度标签答案

【问题标题】：Trying to insert another span tag before another试图在另一个标签之前插入另一个跨度标签
【发布时间】：2019-11-30 11:11:27
【问题描述】：

好吧，我正在尝试在另一个标签之前插入一个跨度标签，以根据其他跨度值充当它的 ID。其中有几个具有特定类名的跨度。所以我会循环遍历其中的每一个，以便同时编辑一个。但是我得到的结果只是一个跨度被插入到顶部跨度，或者没有插入跨度。

我已经尝试使用将“id”添加到 inneHTML，如“A-”+class.innerHTML。但这给出了相同的结果。

<h4>ÄN:<span class="nummer">1023</span></h4>

function arendebokstav() {

  var nummerid = document.getElementsByClassName("nummer");
  var bokstavid = '';
  for (var i = 0; i < nummerid.length; i++) {
    if (nummerid[i].textcontent <= 999) {
      bokstavid = '<span class="newcssclass">A-</span>';
      nummerid[i].insertBefore(bokstavid, nummerid[i])
    } else if (nummerid[i].textcontent <= 1999) {
      bokstavid = '<span class="newcssclass">B-</span>';
      nummerid[i].insertBefore(bokstavid, nummerid[i])
    } else if (nummerid[i].textcontent <= 2999) {
      bokstavid = '<span class="newcssclass">C-</span>';
      nummerid[i].insertBefore(bokstavid, nummerid[i])
    } else if (nummerid[i].textcontent <= 3999) {
      bokstavid = '<span class="newcssclass">D-</span>';
      nummerid[i].insertBefore(bokstavid, nummerid[i])
    } else if (nummerid[i].textcontent <= 4999) {
      abokstavid = '<span class="newcssclass">E-</span>';
      nummerid[i].insertBefore(bokstavid, nummerid[i])
    }
  }
}

没有显示错误消息。我希望它写出“A-999”和“B-1000”等等，但我得到的只是“999”“1000”等等

【问题讨论】：

你试过textContent而不是textcontent吗？
insertBefore 应该在父节点上调用，而不是在你之前插入的节点上。
那是很多重复的代码
是的，当它第一次工作时会重构代码呵呵

标签： javascript html

【解决方案1】：

<!DOCTYPE html>
<html>
<body>

<span id="mySpan">1000</span>

<p>Click the button to insert a word before text.</p>

<button onclick="myFunction('mySpan', 'A-')">Try it</button>

<script>
function myFunction(id, word) {
  var newItem = document.createElement("span");
  var textnode = document.createTextNode(word);
  newItem.appendChild(textnode);

  var list = document.getElementById(id);
  list.insertBefore(newItem, list.childNodes[0]);
}
</script>

</body>
</html>

【讨论】：

【解决方案2】：

我将您的代码编辑如下：

function arendebokstav() {
  let mySpan = document.getElementById('mySpan');
  let nummerid = document.getElementsByClassName("nummer");
  
  for (let i = 0; i < nummerid.length; i++) {
    let letter;
    if (nummerid[i].textContent <= 999) {
        letter = 'A-'
    } else if (nummerid[i].textContent <= 1999) {
        letter = 'D-'
    } else if (nummerid[i].textContent <= 2999) {
        letter = 'C-'
    } else if (nummerid[i].textContent <= 3999) {
        letter = 'D-'
    } else if (nummerid[i].textContent <= 4999) {
        letter = 'E-';
    }
    
    let newItem = document.createElement("span");
    newItem.classList.add("newcssclass");
    newItem.textContent = letter;
    
    mySpan.insertBefore(newItem, mySpan.childNodes[0])
  }
}

arendebokstav();

.newcssclass {
     color: red;
 }

<div id='mySpan'>
    <span class='nummer'>3000</span>
</div>

以下是您错过的内容：

insertBefore 需要将 node 附加到父级。

更详细的解释请咨询doc

【讨论】：