使用javascript按顺序格式排列div

我正在处理这样一个场景：当我在文本框中输入数字时，我需要动态生成div。实际上，我很难与当前div正确对齐。然后我需要为div生成ID。对于这一点，代码也是可用的，但是代码没有将默认div视为preview1，那么它必须像preview2、preview3这样继续。div必须像第一个一样排列顺序，它必须显示preview1

var inputElement = document.getElementById("inputAdd_page");
var totalCount = 0;
inputElement.addEventListener('blur', function () {
    var count = this.value;
    // Gaurd condition
    // Only if it is a number
    if (count && !isNaN(count)) {
        fragment = document.createDocumentFragment();
        for (var j = 0; j < count; ++j) {
            spancount = document.createElement('span');
            prevPage = document.createElement('div');
            navbutton = document.createElement('button');
            preview_PageSize = document.getElementById('page');

            navbutton.className = "div_navig";
            navbutton.setAttribute('id', ['pag_navg' + totalCount]);
            navbutton.innerHTML = [1 + totalCount];

            spancount.className = "spanCount";
            spancount.innerHTML = [1 + totalCount];

            prevPage.className = "preview_windowSize";
            prevPage.setAttribute('id', ['page' + totalCount]);
            prevPage.appendChild(spancount);


            prevPage.style.position = "absolute";
            preview_PageSize.appendChild(prevPage);
            //fragment.appendChild(prevPage);
            fragment.appendChild(navbutton);

            totalCount++;
        }
        inputElement.value = "";
        document.body.appendChild(fragment);
    }
});

var inputElement=document.getElementById（“inputAdd_页面”）；
var totalCount=0；
inputElement.addEventListener（'blur'，函数（）{
var count=这个值；
//高尔德条件
//除非是一个数字
如果（计数&&！isNaN（计数））{
fragment=document.createDocumentFragment（）；
对于（变量j=0；j

这是小提琴

提前谢谢

---

请帮帮我。

你搜索过这样的东西吗

我只是在每个

div

中添加一个

左

位置，因为您将它们设置为

位置：绝对

。 所以我加了一行：

prevPage.style.left= (26 * totalCount) + "px";

---

我只是这样放置

26

，它将是按钮的宽度

如果我没有弄错，请按如下方式更改javascript：

//prevPage.style.position="absolute";            
//preview_PageSize.appendChild(prevPage);
prevPage.style.width="100%";           
preview_PageSize.parentNode.insertBefore(prevPage, preview_PageSize);

---

要改进定位，可以对子元素应用不同的类，如下所示：

prevPage.className = "preview_windowSize_element";  

并使用CSS：

.preview_windowSize_element {
position: absolute;
left: 31px;
top: 0px;
width: 100%;
height: 100%;
}

要从页面ID 1开始，您可以修改脚本：

prevPage.setAttribute('id', ['page' + (totalCount + 1)]);

---

您好，谢谢您的回复，但是div必须位于当前div之上，具有相同的宽度和高度。因此，请添加两行代码：

prevPage.style.width=24+“px”
prevPage.style.padding=“5px 0px”
24
是按钮的宽度，它会根据buttonhi@ram中的文本进行更改，感谢我将上述代码修改为prevPage.style.width=（2/计数）*100+“%”的注释；ID也必须考虑默认div。你能帮我一下吗我已经根据你的笔记更新了我的答案，请看一看Hi@ram非常感谢您的回复，但我仍然没有得到解决方案，它是一个比另一个低，但它必须默认div应该在顶部，下一个div应该在顶部div的下面，然后id没有正确映射Hi tom感谢您的回复，但是默认div应该是第0页，然后是第1页。。。。请帮助mehi mahadevan，这颠倒了元素preview_PageSize.insertBefore（prevPage，preview_PageSize.childNodes[0]）的顺序；编辑提琴：您需要的是id=“page0”位于其他按钮之上的div吗？非常感谢您，这几乎是完美的，但是如果我在输入字段中输入2，我需要获得三个按钮，因为已经有一个div可用，所以我可以这样给出navbutton.innerHTML=[2+totalCount]；您可以检查它是否是第一次运行，如果是，请将计数增加一：