Javascript 如何在行的末尾添加新的子DIV？

单击子DIV时，查找单击子DIV的行，并在该行末尾添加新的子DIV

我试着尽我所能，但现在我只能在第一排添加新的孩子。以下是代码片段：

var pNode=document.querySelector（'.parent'）；
var divs=document.querySelectorAll（'.child'）；
var x=divs.length；
控制台日志（x）；
第一行中元素的变量数=0；
对于（变量i=0；i

.parent{
宽度：380px；
}
.父母，孩子{
显示：内联块；
右边距：2px；
背景颜色：灰色；
边缘底部：20px；
填充：0 10px
}
.父母.新孩子{
背景色：rgba（0,0,0,2）；
边缘底部：20px；
}

1234
12341234
123412341234
1234
12341234
123412341234
1234
12341234
123412341234

我添加了两个片段。你可以使用任何为你服务的人

var pNode=document.querySelector（'.parent'）；
var divs=document.querySelectorAll（'.child'）；
var x=divs.length；
控制台日志（x）；
第一行中元素的变量数=0；
var s=0；
对于（变量i=0；i

.parent{
宽度：380px；
}
.父母，孩子{
显示：内联块；
右边距：2px；
背景颜色：灰色；
边缘底部：20px；
填充：0 10px
}
.父母.新孩子{
背景色：rgba（0,0,0,2）；
边缘底部：20px；
}

1234
12341234
123412341234
1234
12341234
123412341234
1234
12341234
123412341234

我添加了两个片段。你可以使用任何为你服务的人

var pNode=document.querySelector（'.parent'）；
var divs=document.querySelectorAll（'.child'）；
var x=divs.length；
控制台日志（x）；
第一行中元素的变量数=0；
var s=0；
对于（变量i=0；i

.parent{
宽度：380px；
}
.父母，孩子{
显示：内联块；
右边距：2px；
背景颜色：灰色；
边缘底部：20px；
填充：0 10px
}
.父母.新孩子{
背景色：rgba（0,0,0,2）；
边缘底部：20px；
}

1234
12341234
123412341234
1234
12341234
123412341234
1234
12341234
123412341234

尝试以下代码：

var pNode = document.querySelector('.parent');
var divs = document.querySelectorAll('.child'); //or 

var x = divs.length;

console.log(x);

var number_of_elements_in_first_row = 0;

for (var i = 0; i < x; i++) {
  divs[i].addEventListener('click', function(event) {
    var newChild = document.querySelector('.new-child');
    if (newChild) {
      newChild.parentElement.removeChild(newChild);
    }
    setTimeout(function() {
        addChildToEndOfRow(event.target.offsetTop);
    }, 200);
  }, false);
}

function addChildToEndOfRow(offsetTop) {
  var newDiv = document.createElement('div')
  newDiv.innerHTML = "boom";
  newDiv.classList.add("new-child");
  var addAfterOffsetTop;
  for (var i = 0; i < x; i++) {
    if (addAfterOffsetTop && divs[i].offsetTop > addAfterOffsetTop) {
      pNode.insertBefore(newDiv, divs[i]);
      return;
    }
    if (offsetTop === divs[i].offsetTop) {
      addAfterOffsetTop = divs[i].offsetTop;
    }
  }

  pNode.appendChild(newDiv, divs[divs.length-1]);
}

var pNode=document.querySelector（'.parent'）；
var divs=document.querySelectorAll（'.child'）//或
var x=divs.length；
控制台日志（x）；
第一行中元素的变量数=0；
对于（变量i=0；iaddAfterOffsetTop）{
pNode.insertBefore（newDiv，divs[i]）；
返回；
}
if（offsetTop==divs[i].offsetTop）{
addAfterOffsetTop=divs[i].offsetTop；
}
}
pNode.appendChild（newDiv，divs[divs.length-1]）；
}

尝试以下代码：

var pNode = document.querySelector('.parent');
var divs = document.querySelectorAll('.child'); //or 

var x = divs.length;

console.log(x);

var number_of_elements_in_first_row = 0;

for (var i = 0; i < x; i++) {
  divs[i].addEventListener('click', function(event) {
    var newChild = document.querySelector('.new-child');
    if (newChild) {
      newChild.parentElement.removeChild(newChild);
    }
    setTimeout(function() {
        addChildToEndOfRow(event.target.offsetTop);
    }, 200);
  }, false);
}

function addChildToEndOfRow(offsetTop) {
  var newDiv = document.createElement('div')
  newDiv.innerHTML = "boom";
  newDiv.classList.add("new-child");
  var addAfterOffsetTop;
  for (var i = 0; i < x; i++) {
    if (addAfterOffsetTop && divs[i].offsetTop > addAfterOffsetTop) {
      pNode.insertBefore(newDiv, divs[i]);
      return;
    }
    if (offsetTop === divs[i].offsetTop) {
      addAfterOffsetTop = divs[i].offsetTop;
    }
  }

  pNode.appendChild(newDiv, divs[divs.length-1]);
}

var pNode=document.querySelector（'.parent'）；
var divs=document.querySelectorAll（'.child'）//或
var x=divs.length；
控制台日志（x）；
第一行中元素的变量数=0；
对于（变量i=0；iaddAfterOffsetTop）{
pNode.insertBefore（newDiv，divs[i]）；
返回；
}
if（offsetTop==divs[i].offsetTop）{
addAfterOffsetTop=divs[i].offsetTop；
}
}
pNode.appendChild（newDiv，divs[divs.length-1]）；
}

你能试试这个片段吗

var pNode=document.querySelector（'.parent'）；
var divs=document.querySelectorAll（'.child'）//或
var x=divs.length；
控制台日志（x）；
第一行中元素的变量数=0；
对于（变量i=0；i