使用insert

Question

我尝试在单击的位置插入新节点，在单击节点之前插入 我有很多节点，例如：

  <div>hello</div>
  <div> *** </div>
  <div>world</div>

我的问题是， 如何解决这个错误？：消息＆＃34;：＆＃34;未捕获NotFoundError：无法执行＆＃39; insertBefore＆＃39; on＆＃39;节点＆＃39;：插入新节点的节点不是该节点的子节点。＆＃34;， 我的代码是：

＆＃13;

＆＃13;

function clicked() {
  insertNode(document.getElementById('parent'));
}

function insertNode(parentElement, currentNode) {
  var currentSelection, currentRange;

  if (!currentNode) {
    currentSelection = window.getSelection();
    currentRange = currentSelection.getRangeAt(0);
    currentNode = currentRange.startContainer;
    console.log(currentNode.nodeValue);

    var newDiv = document.createElement("div");
    newDiv.className = 'nuevo';
    var newContent = document.createTextNode("holanda");
    newDiv.appendChild(newContent);
    parentElement.insertBefore(newDiv, currentNode);

  }
}

＆＃13;

.nuevo {
  width: auto;
  height: auto;
  background: red;
  display: inline-block;
}

#parent>div {
  float: left;
}

＆＃13;

<div id="parent" contenteditable=true style="border: black 2px solid;" onclick="javascript:clicked(); ">

  <div>hello</div>
  <div> *** </div>
  <div>world</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您所获得的错误说明了一切，您尝试插入的节点实际上并不是节点参考。

parentElement.insertBefore(newDiv, currentNode);

currentNode不是实际节点。

如果你看一下你的功能设置方式：

function clicked() {
  insertNode(document.getElementById('parent'));
}

function insertNode(parentElement, currentNode) { ...

clicked()调用insertNode并仅向其发送一个参数，但insertNode期待两个参数。

然后，在insertNode内，你有

if (!currentNode) {

检查是否currentNode ，当它应该检查 是否< / em> 存在。但是，它永远不会以您的代码设置方式存在。

此外，javascript:回调函数之前不需要click。并且，该代码应首先从HTML内联中删除，因为它可能会导致许多问题。

现在，只要选择不跨越多个节点，以下代码就会起作用。这完全是另一个问题。

＆＃13;

＆＃13;

let parent = document.getElementById("parent");

parent.addEventListener("click", function(event){
 
  // Since the parent was clicked, it can be referenced with "this"
  // The child that was clicked is referenced with event.target
 
  var currentSelection, currentRange, currentNode, newDiv, newContent;

  currentSelection = window.getSelection();
  currentRange = currentSelection.getRangeAt(0);
  currentNode = currentRange.startContainer;
  console.log(currentNode.nodeValue);

  newDiv = document.createElement("div");
  newDiv.className = 'nuevo';
  newContent = document.createTextNode("holanda");
  newDiv.appendChild(newContent);
  this.insertBefore(newDiv, event.target);
 
});

＆＃13;

.nuevo {
  width: auto;
  height: auto;
  background: red;
  display: inline-block;
}

#parent>div {
  float: left;
}

＆＃13;

<div id="parent" contenteditable=true style="border: black 2px solid;">

  <div>hello</div>
  <div> *** </div>
  <div>world</div>

</div>

＆＃13;

＆＃13;

＆＃13;