在div下方插入新Div，点击

Question

如何在单击的节点下插入新节点（使用javascript创建）？

目前它穿过原来的div，我不希望它穿过它，它应该保留在原点

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

parent.addEventListener("click", function(event) {
  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.appendChild(newDiv)

});

.nuevo {
  width: auto;
  height: auto;
  background: red;
  display: inline-block;
  margin-top: 1em;
  z-index: 3;
}

#parent>div {
  float: left;
  z-index: 1;
}

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

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

</div>

结果：

点击world后的单词

点击***后的单词

Answer 1

利用"post-install-cmd": [ "Illuminate\\Foundation\\ComposerScripts::postInstall", "chmod -R 755 bootstrap\/cache" ] 属性查找新的附加元素：

gcloud app deploy

offsetLeft

let parent = document.getElementById("parent");
let rootElements = document.querySelectorAll("div.root");
for (let i = 0; i < rootElements.length; i++ ) {
    rootElements[i].addEventListener("click", function(event) {
        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);
        let xPos = event.currentTarget.offsetLeft;
        let newEle = parent.appendChild(newDiv);
        newEle.style.left = xPos + "px";
   });
}

更新：实现目标的另一种方法

追加每个新堆栈，它实际上具有与第一行相同数量的元素。在每个新堆栈上使用#parent { position: relative; left: 0px; } .nuevo { display: block; width: fit-content; height: auto; background: red; position: relative; } .root { vertical-align: top; display: inline-block; }属性，然后将内部元素对应的宽度与其祖先相同<div id="parent" contenteditable=true style="border: black 2px solid; height:200px"> <div class = "root">hello</div> <div class = "root">***</div> <div class = "root">world</div> </div>（为什么不宽度？这是另一个问题，因为display: flex属性的特征）。

让我们想要的唯一元素的内容明显地为自己扩展空间。

flex-basis

flex

let parent = document.getElementById("parent");
let rootElements = document.querySelectorAll("div.root");
for (let i = 0; i < rootElements.length; i++ ) {
    rootElements[i].addEventListener("click", function(event) {
        newStack = document.createElement("div");
        newStack.className = 'stack';
        
        for (let j = 0; j < rootElements.length; j++) {
            let grid = document.createElement("div");
            grid.className = 'flexItem';
            grid.setAttribute("style", "flex-basis:" + rootElements[j].getBoundingClientRect().width + "px");

            if (i===j) {
                grid.className += ' nuevo';
                grid.textContent = 'holanda';
            }
            newStack.appendChild(grid)
        }
        parent.appendChild(newStack);
   });
}

Answer 2

将事件监听器附加到parent内的每个div，以便您可以使用它们追加元素，同时将nuevo的显示属性更改为block

let items = document.querySelectorAll("#parent > div");
for (var i = 0; i < items.length; i++) {
  var item = items[i];
  item.addEventListener("click", function(event) {
    var newDiv = document.createElement("div");
    newDiv.className = 'nuevo';
    newDiv.appendChild(document.createTextNode("holanda"));
    newDiv.style.left = this.offsetLeft + 'px';
    this.parentNode.appendChild(newDiv);
  });
}

.nuevo {
  width: auto;
  height: auto;
  background: red;
  display: block;
  clear: both;
  position: relative;
}

#parent>div {
  float: left;
}

#parent {
  position: relative;
  left: 0px;
}

<div id="parent" contenteditable=true style="border: black 2px solid; height:200px">
  <div>hello</div>
  <div> *** </div>
  <div>world</div>
</div>