时间戳

首页 > 解决方案 > 尝试在另一个带有 Id 的特定“h1”之前插入“h1”

javascript - 尝试在另一个带有 Id 的特定“h1”之前插入“h1”

问题描述

我需要帮助的特定代码行已标记，但我已将整个函数包含在上下文中。指定代码行的预期输出应该如下：我想在元素newNode之前插入元素"#" + nextRank + "A"（nextRank定义为大写字母，原样rank）。我相信我的代码中的错误来自nextRank特定行的语法，但我可能是错的。有谁知道我该如何解决这个问题？

//rank is a capital letter (EX: "A")
//nodeField is a div which only parents h1's.

function addNode(rank) {
    var alphabet = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
    var nextRank = alphabet[alphabet.indexOf(rank) + 1];
    
    if ($('#nodeField>h1[id^="${rank}"]').length) {
        var aI = alphabet.indexOf($('#nodeField>h1[id^="${rank}"]:last-child')[$('#nodeField>h1[id^="${rank}"]:last-child').length - 1]) + 1;
    } else {
        var aI = 0;
    }
    
    var newNode = document.createElement("h1");
    newNode.innerHTML = 0;
    newNode.id = rank + alphabet[aI];
    
    if ($(`#nodeField>h1[id^="${nextRank}"]`).length > 0) {
        
        //I need help with correcting the statement below!
        document.getElementById("nodeField").insertBefore(newNode, $("#" + nextRank + "A"));

    } else {
        document.getElementById("nodeField").appendChild(newNode);
    }
}

标签： javascriptjquerydom

解决方案

你混合了 jQuery 和纯 JS 元素。有两种方法可以在之前插入新元素。

使用纯 JS：

var newNode = document.createElement("h1");
newNode.innerHTML = 0;
newNode.id = "rankId";

document.getElementById("myDiv").insertBefore(newNode, document.getElementById("myInnerDiv"));
<div id="myDiv">
  <div>&nbsp;</div>
  <div id="myInnerDiv">inner div</div>
  <div>&nbsp;</div>
</div>

在你的情况下：

document.getElementById("nodeField").insertBefore(newNode, document.getElementById(nextRank + "A"));

使用 jQuery：

var newNode = document.createElement("h1");
newNode.innerHTML = 0;
newNode.id = "rankId";

$(newNode).insertBefore($("#myInnerDiv"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">
  <div>&nbsp;</div>
  <div id="myInnerDiv">inner div</div>
  <div>&nbsp;</div>
</div>

在你的情况下：

$(newNode).insertBefore($("#" + nextRank + "A"))

推荐阅读