在div后动态添加div

Question

我发现了一些解决类似问题的问题，但是我不知道如何改变我的代码，使它能够工作。

我有一个模仿表的div和模仿行的subdiv，第一行插入数据是没有问题的，但我不知道如何改变我的"指针"(不知道正确的词)到下一个"行"-div创建一个新的，并添加数据到特定的div。

JQuery:

$("#search").click(function(event){
var e = document.getElementById("lineDesc");
var line = e.options[e.selectedIndex].text;
var month = document.getElementById("descMonth").value;
var desc = $("#lineDescAr").val();
var search = document.getElementById("searchtab");
let fd = new FormData();
fd.set('line', line);
fd.set('month', month);
fd.set('desc', desc);
var x=0; //here im trying to create a counter
fetch('search.php',{method:'POST',body: fd})
.then( r=> r.json())
.then( json=>{
search.innerHTML="";
Object.keys( json ).forEach( key=>{
let obj=json[ key ];
var description = obj.description;
//new divs that imitate data in row-cells
search.innerHTML +='<div class="cell" onclick='showDesc("'+description+'")'>'+obj.line+'</div>';
search.innerHTML +='<div class="cell" onclick='showDesc("'+description+'")'>'+obj.scanner+'</div>';
search.innerHTML +='<div class="cell" onclick='showDesc("'+description+'")'>'+obj.fault+'</div>';
search.innerHTML +='<div class="cell" onclick='showDesc("'+description+'")'>'+obj.duration+'</div>';
search.innerHTML +='<div class="cell" onclick='showDesc("'+description+'")'>'+obj.date+'</div>';
//add new dynamic div after row-div
search.after('<div class="row" id="search'+x+'"></div>');
//change content of search to new dynamic div
search = document.getElementById("search"+x);
console.log(search);
//increase counter
x+=1;
})
})
event.preventDefault();
});

我正试图将搜索的内容更改为应该具有id="search[0-z]"的新div，因为在循环中需要许多div。

在.insertBefore()中使用node的解决方案有所帮助，但无济于事。

编辑:after()的使用是完全错误的。

Answer 1

更改了新div的插入createElement和添加id和className， .after()不能将给定字符串转换为元素，因为它只是作为字符串输出。

var newDiv = document.createElement("div");
newDiv.id = "search"+x;
newDiv.className = "row";
search.after(newDiv);
search = document.getElementById(newDiv.id);
x+=1;

对完整代码感兴趣的人:

$("#search").click(function(event){
var e = document.getElementById("lineDesc");
var line = e.options[e.selectedIndex].text;
var month = document.getElementById("descMonth").value;
var desc = $("#lineDescAr").val();
var search = document.getElementById("searchtab");
let fd = new FormData();
fd.set('line', line);
fd.set('month', month);
fd.set('desc', desc);
var x=0;
fetch('search.php',{method:'POST',body: fd})
.then( r=> r.json())
.then( json=>{
search.innerHTML="";
Object.keys( json ).forEach( key=>{
let obj=json[ key ];
var description = obj.description;
var newDiv = document.createElement("div");
newDiv.id = "search"+x;
newDiv.className = "row";
search.innerHTML +='<div class="cell" onclick='showDesc("'+description+'")'>'+obj.line+'</div>';
search.innerHTML +='<div class="cell" onclick='showDesc("'+description+'")'>'+obj.scanner+'</div>';
search.innerHTML +='<div class="cell" onclick='showDesc("'+description+'")'>'+obj.fault+'</div>';
search.innerHTML +='<div class="cell" onclick='showDesc("'+description+'")'>'+obj.duration+'</div>';
search.innerHTML +='<div class="cell" onclick='showDesc("'+description+'")'>'+obj.date+'</div>';
search.after(newDiv);
search = document.getElementById(newDiv.id);
console.log(search);
x+=1;
})
})
event.preventDefault();
});