使用纯 JavaScript 添加 div 包装器

Question

我正在尝试使用纯 Javascript 创建一个 Twitters Bootstrap grid 函数。

问题是 column 放在 row 外面，但应该在里面。就像

<div class="row">
    <div class="col-md-12"></div>
</div>

现在我在下面发布的代码有这个输出

<div class="row"></div>
<div class="col-md-12"></div>

我试图将第一个插入的 div 设置为父级，但不知何故当我使用 parentNode 属性它 returns 始终为空。

也许有人能给我指出正确的方向？

到目前为止，这是我的代码

    var docFrag = document.createDocumentFragment();

    // Add row
    var row = document.createElement('div');
        row.className = 'row';
    docFrag.appendChild(row);

    // Add column
    var col = document.createElement('div');
        col.className = 'col-md-12';
    docFrag.appendChild(col);

    document.body.appendChild(docFrag);

Answer 1

您将其附加到文档片段，而不是文档片段中的行。

改变

docFrag.appendChild(col);

到

row.appendChild(col);

如果你想让它在行内。

使用纯 JavaScript 添加 div 包装器

Add div wrapper using pure JavaScript

javascript

wrapper

appendchild

createelement