2

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.

1

4 Answers 4

4

.html() sets and retrieves HTML from DOM nodes; not to be confused with .text() which deals with the text value that's inside nodes.

May be you're looking to do something like this:

 var input = '<div>' + $("input").val() + 'www</div>';
 var table = $("#myTable").html();
 var output = input + '<table>' + table + '</table>;

Frankly, I think your HTML is too complex; why do you put divs inside tables?? You could reduce your code and make it work with just the divs.

1
  • the div is just a toggle element, might as well be an anchor tag. this example works, but where is the html from html() why isnt it displayed? Dec 12, 2012 at 20:35
2

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>';
1

All the text you put in the output variable is there, the problem is that $(".result").html(output) ignores the non-HTML stuff. Prove it to yourself by adding this alert:

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

Take a look at the source (or display the value of output in an alert box).

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

You can see that the value from the input field, and 'www' are being added to the result div's html; it's just not being rendered.

Consider using an id attribute rather than a class to define the target for your .html(output):

<div id="result">...</div>

and

$("#result).html(output);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.