Two tables from one String variable of HTML

Question

An AJAX query returns an HTML string that has 2 tables.

I want to put table1 into div1 and table2 into div2

If the HTML representing both tables (they're sequential, not nested or anything funny like that) is stored in variable twoTables, how can I use jQuery selectors (or any other method, although I am trying to avoid direct string manipulation) to split up the variable?

edit: data looks like

<table id="table1"> ... </table><table id="table2"> ... </table>

Answer 1

You can split the two tables into an array. Check out the following:

var s = "<table>Dude!</table><table>What?</table>";
var a = s.match(/<table>.*?<\/table>/gi);
alert(a);

So table one will be in a[0], and table two in a[1].

Answer 2

var $tables = $(twoTables);

$('#div1').append( $tables[0] );
$('#div2').append( $tables[1] );

Example: http://jsfiddle.net/VhAzV/

Since twoTables represents an HTML string of 2 sequential tables, just send the string to a jQuery object, then select each table DOM element by its zero based index.

Or you could use .eq() to get the table wrapped in a jQuery object.

var $tables = $(twoTables);

$tables.eq(0).appendTo('#div1');
$tables.eq(1).appendTo('#div2');

---

Here's a no jQuery version that still uses the browser's native HTML parser:

Example: http://jsfiddle.net/patrick_dw/VhAzV/2/

var twoTables = '<table><tr><td>table one</td></tr></table><table><tr><td>table two</td></tr></table>';
var $tables = document.createElement('div');
$tables.innerHTML = twoTables;

document.getElementById('div1').appendChild($tables.firstChild);
document.getElementById('div2').appendChild($tables.firstChild);

EDIT: Made it truly no-jQuery in the DOM insertion.

Answer 3

As per http://api.jquery.com/load/

$('#result').load('ajax/test.html #container');

You can do this twice for two tables.

Answer 4

If you have a string that looks something like this:

var foo = "<table><tr><td>1</td></tr></table><table><tr><td>2</td></tr></table>";

First make it a jQuery object:

foo = $(foo);

Then you can get each table and insert them wherever you'd like:

$("#div1").append(foo[0]); // First table
$("#div2").append(foo[1]); // Second table

Answer 5

This might be ugly but it's the first thing that comes to my mind, hopefully others will find a more elegant solution:

var tableEnd = '</table>';

var arr = twoTables.split(tableEnd);

var t1 = arr[0].concat(tableEnd), t2 = arr[1].concat(tableEnd);

div1.innerHTML = t1;

div2.innerHTML = t2;

bonus: no jQuery overhead! :)