CODEWITHSUNDEEP
javascripthtmldom
Cian W
Cian W

Reputation: 106

Multiple variables and text in .appendChild()

I have a table with a cell that has two buttons in it and a slash between them like this

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);

}

The last 3 lines of this function do what I'm looking for but to me it doesn't seem like to correct way to do this. This is my first DOM scripting project.

Upvotes: 1

Views: 620

Answers (1)

ash
ash

Reputation: 329

We all live in the world of, "As long as the code works, it's good". However, few suggestions:

  1. Not sure if JQuery is an option for you, but it can help develop browser independent code, else, you will end up testing this (javascript) code, in all browsers.
  2. Create template HTML and append that to the cell. The number of lines of code will reduce drastically and the code becomes more readable.
  3. Dont use inline styles. Instead, create a css class and use className method

Upvotes: 1

Related Questions