созданный елемент в innerHTML

[viktornord]

Помогите пожалуйста!
Проблема состоит в том, что надо вывести переменную в хтмл тег.
Если делать так
document.querySelector('tbody').innerHTML += '<tr> <td class="number">' + (id + 1) + '</td> <td>' +
val.txt + '</td> <td class="' + val.imp + '">' + val.imp + '</td> <td class="done">' +
'<button>Done</button></td> </tr>';
}); //val - объект с полями imp и txt, id - просто переменная))
то в таком случае все отлично выводит, а если писать таким способом
x=document.createElement('tr');
x.innerHTML='<tr> <td class="number">' + (id + 1) + '</td> <td>' +
val.txt + '</td> <td class="' + val.imp + '">' + val.imp + '</td> <td class="done">' +
'<button>Done</button></td> </tr>';
});
document.querySelector('tbody').innerHTML += x;
то выводит нечто непонятное, а именно [object HTMLTableRowElement]
что делать? или как это преобразовать в нормальный вид.
Спасибо!

[Rise]

document.querySelector('tbody').appendChild(x);

[viktornord]

спасибо, сработало

[рони]

x=document.createElement('tr');
x.innerHTML='<tr>

строка в строке - венигрет

[Deff]

var ReturnThisHTML = (function(div){
    return function(obj) {
        div.innerHTML="";
        div.appendChild(obj);
        return div.innerHTML;
    }
})( document.createElement( 'div' ) );


var x=document.createElement('tr');
//Cтрока кривая, дабы не вводить переменных
 x.innerHTML='<tr> <td class="number"> + (id + 1) + </td> <td>'
 +  'val.txt +</td> <td class=" + val.imp + "> + val.imp + </td> <td class="done">'+ '<button>Done</button></td> </tr>';

alert(ReturnThisHTML(x))
//Далее 
//document.querySelector('tbody').innerHTML += ReturnThisHTML(x);

Хотя имхо проще добавить к tbody строку вместе с тегами tr ///