Question

我有一个带有聊天记录的游戏，显示对你和敌人造成的伤害。我没有添加文本节点或paragrahs，而是使用了一个创建＆＃34; DIV＆＃34;每次我记录一些东西的元素。意识到DIV元素可以变成按钮，我想要在我的聊天记录中创建可以点击的某些DIV，我想我可以通过添加属性/类/来做到这一点已创建的DIV元素的ID。 我该怎么做？目前，我可以创建无限量的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 Element docs来查看你可以搞砸的所有方法和属性。

Answer 2

元素具有setAttribute方法，并且还有反映大多数属性的命名属性：

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

Javascript：使用createElement函数时，如何为创建的元素设置属性？

2 个答案: