如何在Javascript中的特定位置插入百分比

我试图用insertbefore更改一些Javascript代码创建的位置，但我不知道如何在代码中应用它

My Javascript生成随机数，并创建一个将这些数作为其子项插入的位置：

<script type="text/javascript">

  var orderedList = document.getElementById("my_list");
  var itemLength = orderedList.children.length - 1; // CALCULATE LENGTH OF THE ITEM LIST

  function getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  // get a default 100 into the array
  var arrayOfNumbers = [100],
      listItem = document.querySelector("list_item");

  // get itemLength random numbers
  for (let i = 0; i < itemLength; i++) {
    arrayOfNumbers.push(getRandomInt(30, 98))
  }

  // sort the array of random numbers
  arrayOfNumbers.sort(function(a, b) {
    return b - a
  })

  // now do the lopping and creating elements
  for (let i = 0; i < arrayOfNumbers.length; i++) {
    let randomIntContainer = document.createElement('div');
    randomIntContainer.textContent = arrayOfNumbers[i] + "%";
    randomIntContainer.setAttribute('class', 'number');
    for (const matchingOrder of orderedList.querySelectorAll('.matching_score')) { matchingOrder.appendChild(randomIntContainer.cloneNode(true))}
  }

</script>

我怎样才能做到这一点？

而不是

for (let i = 0; i < arrayOfNumbers.length; i++) {
    let randomIntContainer = document.createElement('div');
    randomIntContainer.textContent = arrayOfNumbers[i] + "%";
    randomIntContainer.setAttribute('class', 'number');
    for (const matchingOrder of orderedList.querySelectorAll('.matching_score')) { matchingOrder.appendChild(randomIntContainer.cloneNode(true))}
}

证明其有效性的示例：

设ArrayOfNumber=[2,5,6,8]； 对于orderedList.querySelectorAll.matching_score.条目的常量[i，matchingOrder]{ 让randomIntContainer=document.createElement'div'； randomIntContainer.textContent=ArrayOfNumber[i]+%； randomIntContainer.className='number'； 匹配Order.appendChildrandomIntContainer； } 福

酒吧

巴兹

福巴

---

对于任何给定的idvalue，每页不能有多个元素。首先解决这个问题，改用类。没有人希望修复无效HTML上的DOM内容。Node.insertBefore方法将在引用节点之前插入一个节点作为指定父节点的子节点。示例来源：您找到了正确的方法，是否尝试过使用它？如果是这样的话，请告诉我们您尝试了什么，我们可以帮助您理解为什么它不起作用。在此之前，Insert没有任何用处。对于orderedList.querySelectorAll.matching{matchingOrder.appendChildrandomIntContainer.cloneNodetrue}的常量matchingOrder，如果它显示每个项目中的所有数字，则意味着每次循环创建项目时，也会输出所有数字。如果您只想在每个项目中输出一个数字，那么您需要找到一种方法，根据当前输出的项目确定您需要的特定数字，并仅选择该数字作为输出。如何将每个数字与每个项目相关联？我在控制台中添加以下代码时得到：Uncaught TypeError:matchingOrder.appendChild不是哪个浏览器中的函数？我使用Google ChromeMy bad，它必须是[I，matchingOrder]，而不是[matchingOrder，I]。请重试。它现在可以工作了，非常感谢！我真的很感激！

<div>
   {% if  page_obj.object_list %}
       <ol class="row top20" id="my_list">

          {% for result in page_obj.object_list %}

          <li class="list_item">
              <div class="showcase col-sm-6 col-md-4">

     <!--  Display the Js function in the written div below --> 

               <div class="matching_score">
                    <!-- Here -->
               </div>

               <a href="{{ result.object.get_absolute_url }}">
                      <h3>{{result.object.title}}</h3>
                      <h5>{{ result.object.destination }}</h5>
                      <img src="{{ result.object.image }}" class="img-responsive">
               </a>
               </div>
          </li>

           {% endfor %}

       </ol>
</div>
    {% endif %}

for (let i = 0; i < arrayOfNumbers.length; i++) {
    let randomIntContainer = document.createElement('div');
    randomIntContainer.textContent = arrayOfNumbers[i] + "%";
    randomIntContainer.setAttribute('class', 'number');
    for (const matchingOrder of orderedList.querySelectorAll('.matching_score')) { matchingOrder.appendChild(randomIntContainer.cloneNode(true))}
}

for (const [i, matchingOrder] of orderedList.querySelectorAll('.matching_score').entries()) {
    let randomIntContainer = document.createElement('div');
    randomIntContainer.textContent = arrayOfNumbers[i] + "%";
    randomIntContainer.className = 'number';
    matchingOrder.appendChild(randomIntContainer);
}