jQuery: Get html as user input, update it, and return updated html to user

I'm trying to create a tool that will update some html provided by the user in a textarea form element. I want the user to provide a well-formatted html table, the rows of which may have classes to denote odd or even rows. I want to remove any existing classes and add back appropriate odd/even classes.

Form element:

<div id="rowform">
<p>Enter the table code you have here.  Click submit to have the even/odd class attributes updated.</p>
<form onsubmit="return updateRowClass()">
<textarea name="rowData" id="rowData" cols="100" rows="20"></textarea>
<br><br><input type="submit" value="Submit table code">
<form>
</div>

Here's where I am in my attempt at retrieving and manipulating the text. This is what doesn't work, but I hope someone will understand what I'm going for:

function updateRowClass(){
var rowData = document.createElement("div");
rowData.innerHTML = ($("#rowData").val());
var trOdd = $("tr:odd" , rowData.开发者_开发问答innerHTML).removeClass().addClass("odd");
var trEven = $("tr:even" , rowData.innerHTML).removeClass().addClass("even");

return false;
}

What I can't find in my research is how to create a DOM tree from the string in the form element, then manipulate that constructed DOM tree, and get it back to the user.

From what I can tell this is what your looking for:

rowData.innerHTML = ($("#rowData").val());

With this one

$('#rowform').append($("#rowData").val());