javascript - .appendChild() 中的多个变量和文本

Question

我有一个表格，其中一个单元格有两个其中的按钮以及它们之间的斜线，例如

function insertRow (label) {

    var list = document.getElementById('list');
    var row  = list.insertRow();
    var cell1 = row.insertCell(0);
    var slash = document.createTextNode('/');
    var upButton = document.createElement('button');
    var  downButton= document.createElement('button');

            upButton.innerHTML = "Up";
            downButton.innerHTML = "Down";

    cell1.style.borderBottom = "2px solid black";
    cell1.style.borderLeft = "2px solid black";

    cell1.appendChild(upButton);
    cell1.appendChild(slash);
    cell1.appendChild(downButton);

}

这个函数的最后 3 行做了我正在寻找的事情，但对我来说，这似乎不是正确的方法。这是我的第一个 DOM 脚本项目。

Answer 1

我们都生活在这样的世界里:“只要代码能工作，那就是好的”。但是，有一些建议:

1. 不确定 JQuery 是否适合您，但它可以帮助开发独立于浏览器的代码，否则，您最终将在所有浏览器中测试此(javascript)代码。
2. 创建模板 HTML 并将其附加到单元格中。代码行数将大幅减少，代码变得更具可读性。
3. 不要使用内联样式。相反，创建一个 css 类并使用 className 方法