innerHTML display 2 columns

Question

I have this code here where it can generate a list from the values in the database. The problem is it only displays 1 column. How can I display 2 columns in a list by correcting this code?

desired display:

   (from column1)   (from column2)
○ (some booktitle) (some bookauthor)
○ (some booktitle) (some bookauthor)
○ (some booktitle) (some bookauthor)

code: (fldBookTitle is the Column name and the second is fldBookAuthor)

function listBooks(){
            db.transaction(function (tx){
                tx.executeSql('SELECT * FROM tblBooks', [],          function(tx, results){
                    var len = results.rows.length, i;
                    var listContainer = document.createElement("div");
                    document.getElementsByTagName("body")[0].appendChild(listContainer);
                    var listElement = document.createElement("ul");
                    listContainer.appendChild(listElement);
                    for(i=0;i<len;++i){
                        var listItem = document.createElement("li");
                        listItem.innerHTML = results.rows.item(i).fldBookTitle;
                        listElement.appendChild(listItem);
                    }   

                });
                //console.log("table created");
            });



        }

thanks for any help.

Answer 1

If you are looking for more than one column, a table seems more appropriate than a ul. Otherwise you can add both items to each row (li) but the second values won't reliably match up vertically like a column.

Answer 2

Your best bet (other than a table) would be to use a dictionary list dl . Each item in a dictionary list has a dictionary term dt and a dictionary definition dd .

Answer 3

This should do it. It creates a table with table rows and two columns.

function listBooks(){
            db.transaction(function (tx){
                tx.executeSql('SELECT * FROM tblBooks', [],          function(tx, results){
                    var len = results.rows.length, i;
                    var listContainer = document.createElement("div");
                    document.getElementsByTagName("body")[0].appendChild(listContainer);
                    var listElement = document.createElement("table");
                    listContainer.appendChild(listElement);
                    for(i=0;i<len;++i){
                        var listItem = document.createElement("tr");
                        var titleItem = document.createElement("td").innerHTML = results.rows.item(i).fldBookTitle;
                        var authorItem = document.createElement("td").innerHTML = results.rows.item(i).fldBookAuthor;
                        listItem.appendChild(titleItem);
                        listItem.appendChild(authorItem);
                        listElement.appendChild(listItem);
                    }   

                });
                //console.log("table created");
            });



        }

Second solution

function listBooks(){
            db.transaction(function (tx){
                tx.executeSql('SELECT * FROM tblBooks', [],          function(tx, results){
                    var len = results.rows.length, i;
                    var listContainer = document.createElement("div");
                    document.getElementsByTagName("body")[0].appendChild(listContainer);
                    var listElement = document.createElement("ul");
                    listContainer.appendChild(listElement);
                    for(i=0;i<len;++i){
                        var listItem = document.createElement("li");
                        listItem.innerHTML = results.rows.item(i).fldBookTitle + " " + results.rows.item(i).fldBookAuthor;
                        listElement.appendChild(listItem);
                    }   

                });
                //console.log("table created");
            });



        }