Question

im trying to combine 2 variables in 1, the classical book way

a = 1;
b = "bla";
c = a + b;

But, When one of the variables, has html() jquery function, the result is only this variable, and nothing more. Why is this? And what should i do in such cases?

All The JS Code

    $("#target").click(function() {
$('#myTable tr:last').after('<tr><td>Bla</td><td><div class="remove">REMOVE</div></td></tr>');
});
$("#myTable").on('click', '.remove', function(event) {
  $(this).parent().parent().remove();
});

$("button").click(function() {
  var input = $("input").val();
  var table = $("#myTable").html();
  var output = input + "www" + table;
  $(".result").html(output);
});

Relevant Code:

$("button").click(function() {
  var input = $("input").val();
  var table = $("#myTable").html();
  var output = input + "www" + table;
  $(".result").html(output);
});

html output only prints the table contents, but not the other vars. Combining vars sure works, but if there is html(). in one of them, only this var is printed. What sourcery is this?

http://jsbin.com/ucopun/9/edit

To see it not working, type something in the input and click result.

Answer 1

The problem is that $("#myTable").html(); returns your table html without the start and ending tags <table></table> so when you later concatenate your text to the amputed html table code the browser interprets your text belong to the table but dont know how to render it.

The simple solution is to output a proper table so the text is correctly displayed and separated from the table, so to do that, just replace your following line:

var table = $("#myTable").html();

for this one:

var table = '<table>' + $("#myTable").html() + '</table>';