在點擊的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

利用offsetLeft屬性找到新的append元素：

 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); }); } 

 #parent { font-size: 0px; // For eliminating gap between inline-blocks } .stack { display: flex; } .flexItem { flex: 0 1; } .nuevo { height: auto; background: red; position: relative; font-size: 16px; } .root { display: inline-block; font-size: 16px; } 

 <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> 

Answer 2

將事件偵聽器附加到parent每個div，以便您可以使用它們來追加元素，也可以將nuevo的display屬性更改為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>