Question

这似乎是一个小问题，但我没有得到解决方案。

tableAdd: function(entry) {
    var $tr = document.createElement('div'), $td, key;
    $tr.setAttribute("class", "mylist_zeile clearfix");

    for (key in entry) {
        if (entry.hasOwnProperty(key)) {

            $td = document.createElement("div");
            $td.appendChild(document.createTextNode(entry[key]));
            $tr.appendChild($td);
            $td.setAttribute("class", "mylist_spalte");

        }
    }
    $td = document.createElement("span");
    $td.setAttribute("class", "mylist_remove");
    $td.innerHTML = '<a data-op="remove" data-id="'+ entry.id +'">X</a>';
    $tr.appendChild($td);
    $tr.setAttribute("id", "entry-"+ entry.id);

    mylist.$table.appendChild($tr);
}

...给我：

<div id="entry-1" class="mylist_zeile clearfix">
    <div class="mylist_spalte">1</div>
    <div class="mylist_spalte">Title One</div>
    <div class="mylist_spalte">http://www.google.com/someurl1</div>
    <span class="mylist_remove">
        <a data-id="1" data-op="remove">X</a>
    </span>
</div>
<div id="entry-2" class="mylist_zeile clearfix">
    <div class="mylist_spalte">2</div>
    <div class="mylist_spalte">Title Two</div>
    <div class="mylist_spalte">http://www.google.com/someurl2</div>
    <span class="mylist_remove">
        <a data-id="2" data-op="remove">X</a>
    </span>
</div>

到目前为止，这很好。现在我需要用类"mylist_spalte"将这3个div包含在另一个div中（使用类"mylist_wrapper"。并且每个具有类"mylist_spalte"的div应该得到另一个类：

第一个div："row_1"

第二个div："row_2"

第三个div："row_3"

任何想法？

Answer 1

您可以使用classList对象而不是setAttribute。 https://developer.mozilla.org/en-US/docs/Web/API/Element.classList

然后将所有内容包装在另一个div中，这应该非常简单，请尝试此代码

tableAdd: function(entry) {
    var $tr = document.createElement('div'),
        $wrap = document.createElement('div'),
        $td, key;
    $tr.setAttribute("class", "mylist_zeile clearfix");
    $wrap.setAttribute("class", "mylist_wrapper");
    var count = 0;
    for (key in entry) {
        if (entry.hasOwnProperty(key)) {
            count++;
            $td = document.createElement("div");
            $td.appendChild(document.createTextNode(entry[key]));
            $td.classList.add("mylist_spalte");
            $td.classList.add("row_"+count);
            $wrap.appendChild($td);

        }
    }
    $tr.appendChild($wrap);
    $td = document.createElement("span");
    $td.setAttribute("class", "mylist_remove");
    $td.innerHTML = '<a data-op="remove" data-id="'+ entry.id +'">X</a>';
    $tr.appendChild($td);
    $tr.setAttribute("id", "entry-"+ entry.id);

    mylist.$table.appendChild($tr);
}

Answer 2

你可以这样做。

var $parentdiv = document.createElement('div');
 var $tr = document.createElement('div'), $td, key;
// in the end of $tr assignment/operations 
$parentdiv.appendChild($tr);
 mylist.$table.appendChild($tr);

包裹div＆＃34; document.createElement＆＃34;

2 个答案: