jQuery 通過已有模板生成節點並添加到頁面

1. jQuery 代碼：

/**
 * 回車鍵發佈評論；
 * 獲取到頁面已有的節點並進行相應內容替換；
 */
$('.commList').delegate('.replyBox .g-input', 'keypress', function (e) {
	if (13 != e.keyCode) {
		return;
	}
	var $ul = $(this).closest('ul');
	var $li = $(this).closest('li');
	var name = $(this).closest('.cont').find('.info .name').text();
	var isReplyReply = $ul.hasClass('replies');
	var html = '';
	// 獲取到頁面已有的節點並進行相應內容替換；
	var $reply = $($('#tempReply').html());
	$reply.find('.text').text('回覆 ' + name + '：' + $(this).val());
	if (isReplyReply) {
		html = $reply[0].outerHTML;
		$ul.append(html);
	} else {
		if ($li.find('.replies').length) {
			html = $reply[0].outerHTML;
			$li.find('.replies').append(html);
		} else {
			html = '<ul class="replies">' + $reply[0].outerHTML + '</ul>';
			$li.append(html);
		}
	}
	$(this).closest('.replyBox').remove();
});

2. 被選擇的節點

<script type="text/html" id="tempReply">
	<li>
		<div class="avatar"><img src="../images/pic-4.jpg" width="60" height="60" /></div>
		<div class="cont">
			<div class="info">
				<a class="name" href="javascript:;">史蒂芬</a>
				<span>2016-07-04 15:13:12</span>
				<a class="reply" href="javascript:;">回覆</a>
			</div>
			<div class="text"></div>
		</div>
	</li>
</script>