Javascript：使用createElement函數時，如何為創建的元素設置屬性？

Question

我有一個帶有聊天記錄的游戲，其中顯示了對您和敵人的傷害。 我沒有添加文本節點或paragrah，而是使用了一個函數，該函數在每次登錄時都會創建“ DIV”元素。 意識到DIV元素可以變成按鈕，我想讓在聊天記錄中創建的某些DIV可以單擊，我想可以通過向創建的DIV元素添加屬性/類/ ID來做到這一點。 。 我怎么做？ 目前，我可以創建無限數量的DIV，但是我不太確定如何分配特定的DIV屬性，這些屬性又將使它們成為聊天記錄中的可單擊按鈕。

function logMessage(message) {
    var chatbox = dom.el("chatbox");
    chatbox.appendChild(document.createElement("div")).textContent = message;
    if (chatbox.children.length > 19) chatbox.removeChild(chatbox.children[0]);
    chatbox.scrollTop = chatbox.scrollHeight;
};


game = {
    start: function() {
        logMessage("Welcome to the Arena!");
        logMessage("Select your Fighter.");
        logMessage("DWARF"); // I want this to be clickable
        logMessage("2 Upgrade Points - 0 Skill Points.");
        logMessage("HUMAN"); // I want this to be clickable
        logMessage("1 Upgrade Point - 1 Skill Point.");
        logMessage("ELF"); // I want this to be clickable
        logMessage("0 Upgrade Points - 2 Skill Points.");
    },

Answer 1

您可以像其他任何東西一樣將新元素存儲為變量：

var myDiv = document.createElement('div');

chatbox.appendChild(myDiv);

myDiv.textContent = message;

myDiv.id = 'helloWorld';

myDiv.style.backgroundColor = 'red';

^這些只是一些示例。 我將看一看MDN元素文檔，以了解您可以弄亂的所有方法和屬性。

Answer 2

元素具有setAttribute方法，並且還有反映大多數屬性的命名屬性：

var messageElement = document.createElement('div');
messageElement.className = 'message';
//messageElement.setAttribute('class', 'message'); // equivalent
messageElement.textContent = message;
chatbox.appendChild(messageElement);