Manipulate HTML String using jQuery

Manipulate HTML string using jQuery

HTML

Input
<br/>
<textarea id='input'>&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;</textarea>
<br/>Output
<br/>
<textarea id='output'></textarea>
<br/>
<button id='manipulateBtn'>Manipulate HTML</button>

CSS

textarea {
    width: 400px;
    height: 120px;
    border: 3px solid #cccccc;
    padding: 5px;
    font-family: Tahoma, sans-serif;
    background-image: url(bg.gif);
    background-position: bottom right;
    background-repeat: no-repeat;
}

JavaScript

$('#manipulateBtn').click(function () {
    var htmlText = $('#input').val();

    htmlText = '<div id="temp">' + htmlText + '</div>';
    var node = $(htmlText);

    node.find('table').attr('width', '100%');
    node.find('td').attr('width', '100%');
    alert(node.html());
    $('#output').val(node.html());
})