Javascript - innerHTML & 的使用代码审查中的 id 方法

Question

所有，

这是我正在编写的脚本的代码。

它的作用： 当按下蓝色按钮时，包含“5000”数字的框顶部应出现一个 div。

我遇到的问题是使用innerHTML &为动态创建的 div 分配一个 id。我在 Firebug 中没有收到任何错误，所以我不确定我出了什么问题/哪里出了问题。

问题行：

eCreditTransactions[i].id = ("trans" + i);

eCreditTransactions[i].innerHTML = '<div class="cCreditContainer"><span class="cCreditsNo">-50</span>&nbsp;<img class="cCurrency" src="" alt="" /></div><span class="cCloseMsg">Click box to close.</span><div class="dots"></div><div class="dots"></div><div class="dots"></div>';

这是完整的代码：

var eCreditSystem = document.getElementById("creditSystem");
var i = 0;
var eCreditTransactions = new Array(6);                 // 6 instances created which will be recycled

function createCreditTransaction ()                 // func called when a transaction occurs, at the mo, attached to onclick()
{
    if (i < 6)
    {
        $(eCreditTransactions[i]).remove();
        eCreditTransactions[i] = undefined;                 // to delete the existing data in the index of array
        addingElements (i);                 // calling function
    } else
    if (i > 5 || eCreditTransactions[i] != undefined)
    {
        i = 0;
        $(eCreditTransactions[i]).remove();
        eCreditTransactions[i] = undefined;
        console.log(eCreditTransactions[i]);
        addingElements (i);
    }
}

function addingElements (arrayIndex)                    // func called from within the 'createCreditTransaction()' func
{
    console.log(eCreditTransactions[i]);
    eCreditTransactions[i] = $(document.createElement('div')).addClass("cCreditTransaction").appendTo(eCreditSystem);

// the problem area

    eCreditTransactions[i].id = ("trans" + i);
    eCreditTransactions[i].innerHTML = '<div class="cCreditContainer"><span class="cCreditsNo">-50</span>&nbsp;<img class="cCurrency" src="" alt="" /></div><span class="cCloseMsg">Click box to close.</span><div class="dots"></div><div class="dots"></div><div class="dots"></div>';

    console.log(eCreditTransactions[i]);
    return i++;
}

Jsfiddle

Answer 1

在这行代码中：

 eCreditTransactions[i] = $(document.createElement('div'))

您正在创建一个 dom 元素，然后将其包装在 jQuery 对象 中

以访问该对象上的 id 属性，您需要使用其方法，

 eCreditTransactions[i].attr('id', 'newId');

相同

与innerHTML属性使用jQuery方法 html();

 eCreditTransactions[i].html(yourHtmlString);

请参阅此处文档