jQuery 通過已有模板生成節點並新增到頁面
阿新 • • 發佈:2019-02-13
1. jQuery 程式碼:
2. 被選擇的節點/** * 回車鍵釋出評論; * 獲取到頁面已有的節點並進行相應內容替換; */ $('.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(); });
<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>