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>