javascript - 如何使用insertBefore和nextSibling方法交换现有子节点？

期望的结果：
考虑一下“ Alpha Bravo Charlie Delta”一词
点击Alpha ='Bravo Alpha Charlie Delta'
点击Charlie ='Bravo Aplha Delta Charlie'

function myFunction(word) {
  var x = document.getElementById("Swap").checked;
  var y = document.getElementById("Delete").checked;
  var referenceNode = document.getElementById("word");


  if (x == true) {
    //referenceNode.parentNode.insertBefore(nextSibling);

  } else if (y == true) {
    word.parentNode.removeChild(word);
  } else {
    return false;
  }
}

<div id="container">
  <div id="word1" onClick="myFunction(this)">Alpha</div>
  <div id="word2" onClick="myFunction(this)">Bravo</div>
  <div id="word3" onClick="myFunction(this)">Charlie</div>
  <div id="word4" onClick="myFunction(this)">Delta</div>
</div>

<br>

<form>
  <input type="radio" name="selector" id="Delete" value="Delete" checked>
  <label for="Delete">Delete</label>
  <br>
  <input type="radio" name="selector" id="Swap" value="Swap">
  <label for="Swap">Swap</label>
  <br>
</form>

最佳答案

您的代码有几处错误。

特别是，您不能仅调用nextSibling，这是节点的属性。您必须这样称呼：someNode.nextSibling。

您还需要注意，DOM中的所有内容都是一个节点，包括空格。因此，nextSibling通常会在源代码中返回与每个TEXT_NODE之后的回车符（空格）相对应的div。相反，使用nextElementSibling仅查找下一个为ELEMENT_NODE（而不是TEXT_NODE）的兄弟姐妹。有关节点类型here的更多信息，请参见。

此外，insertBefore()方法采用两个参数，即newNode和referenceNode。阅读有关该here的更多信息。

另外，您不应该使用内联HTML事件处理属性（不是您的实际问题，只是一种不好的做法），并且您不需要最后一个else分支。

请参阅下面的工作示例。

// Get DOM reference to the Swap Radio Button
// Since there are only two radio buttons, we
// only need to get one of them. When we check
// it for checked later, if it isn't checked,
// we'll know that the other one is.
var x = document.getElementById("Swap");

// Get all the div elements into a node list
// based on the CSS class they all have:
var divs = document.querySelectorAll(".word");

// Loop through the node list and attach the click
// event handler to each. This replaces the inline
// HTML onClick event handlers you had before.
divs.forEach(function(div){
  div.addEventListener("click", myFunction);
});

// Click event handler
function myFunction() {
  // Get the radio button that is checked by searching
  // using the CSS ":checked" pseudo-class that returns
  // elements that are currently in a checked state.
  // In this example, you only have two radio buttons
  // and they are in a group making them mutually exclusive
  // since only one of them can be checked, querySelector
  // will return the first element in the search node
  // (document here) that matches the selector.
  var checked = document.querySelector(":checked");

  // See if that button is the Swap button
  if (x === checked) {

    // It is, now check to see if this clicked div
    // is NOT the last one. The JavaScript keyword
    // "this" refers to the "invocation context"
    // object (the object responsible for triggering
    // this code. Since this is an event handler that
    // handles the click event of a DIV element, "this"
    // will refer to the DIV that was clicked. No need
    // to pass an object reference in. The test here
    // is just checking for the existence of a next
    // element sibling.
    if(this.nextElementSibling){
      // It's not the last div. Swap it with its next sibling:
      this.parentNode.insertBefore(this.nextElementSibling, this);
    }
  } else {
    // Delete was checked. Deleted the current div
    this.parentNode.removeChild(this);
  }
}

<div id="container">
  <div class="word" id="word1">Alpha</div>
  <div class="word" id="word2">Bravo</div>
  <div class="word" id="word3">Charlie</div>
  <div class="word" id="word4">Delta</div>
</div>

<br>

<form>
  <input type="radio" name="selector" id="Delete" value="Delete" checked>
  <label for="Delete">Delete</label>
  <br>
  <input type="radio" name="selector" id="Swap" value="Swap">
  <label for="Swap">Swap</label>
  <br>
</form>

关于javascript - 如何使用insertBefore和nextSibling方法交换现有子节点？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40997751/