记一次全保真还原操作

样式编辑需要按照一定的规范：缩进，元素定位等

<style type="text/css">
        body {
            font-size: 14px;
            background-color: #fff;
        }

        #chatMsgs .area {
            padding: 5px;
            margin: 0;
        }

        #chatMsgs .area .param {
            padding: 0;
            margin: 0 0 20px 0;
        }

        #chatMsgs .area .param > img {
            width: 32px;
            border-radius: 16px;
            float: left;
        }

        #chatMsgs .area .param > .chat-area {
            padding-left: 47px;
        }

        #chatMsgs .area .param > .chat-area .chat-param {
            margin-bottom: 1px;
        }

        #chatMsgs .area .param > .chat-area .chat-param > .text {
            font-size: 14px;
            color: #ffffff;
            line-height: 1.4em;
            background: #0099ff;
            padding: 5px 12px;
            display: inline-block;
            border-radius: 0 20px 20px 0;
        }

        #chatMsgs .area .param > .chat-area .chat-param:first-child .text {
            border-top-left-radius: 20px;
        }

        #chatMsgs .area .param > .chat-area .chat-param:last-child .text {
            border-bottom-left-radius: 20px;
        }

        #chatMsgs .area .param > .chat-area .chat-param .text .smile {
            width: 16px;
            height: 16px;
            background: url("icons.png");
            background-position: 0 0;
            display: inline-block;
            vertical-align: middle;
        }

        #chatMsgs .area .param > .chat-area .chat-param .text .love {
            width: 16px;
            height: 16px;
            background: url("icons.png");
            background-position: 16px 0;
            display: inline-block;
            vertical-align: middle;
        }

        #chatMsgs .area .param > .chat-area .chat-param .text .sad {
            width: 16px;
            height: 16px;
            background: url("icons.png");
            background-position: 32px 0;
            display: inline-block;
            vertical-align: middle;
        }

    </style>

js实现相关的逻辑操作，包含动态标签添加，对象设置等：

<script type="text/javascript">
        var chatMessages = [
            {"face": "face1.png", "msg": [{"content": "2位在吗？周末出去玩？", "emoji": "smile"}]},
            {"face": "face2.png", "msg": [{"content": "我在"}, {"content": "可以啊，去哪玩？", "emoji": "love"}]},
            {
                "face": "face3.png",
                "msg": [{"content": "来了"}, {"content": "我可能去不了", "emoji": "sad"}, {
                    "content": "马上要JavaWeb考试了，我得学下前端技术",
                    "emoji": "sad"
                }]
            }
        ];

        function renderChatMessages() {
		
            var $chatMsgs = $("#chatMsgs");
			var str="<div class='area'><div class='param'><img src='face1.png'><div class='chat-area'><div class='chat-param'><span class='text'>asfasdf<span class='smile'></span><span class='love'></span><span class='sad'></span></span></div><div class='chat-param'><span class='text'>asfasdf</span></div><div class='chat-param'><span class='text'>asfasdf</span></div></div></div><div class='param'><img src='face1.png'><div class='chat-area'><div class='chat-param'><span class='text'>asfasdf</span></div><div class='chat-param'><span class='text'>asfasdf</span></div></div></div></div>";
			$chatMsgs.innerHtml=str;
            var aHtml = ['<div class="area">'];
            for (var i = 0, j = chatMessages.length; i < j; i++) {
                var tmpparamObj = chatMessages[i];
                aHtml.push('<div class="param">');
                aHtml.push('    <img src="' + tmpparamObj.face + '">');

                var aMsg = tmpparamObj.msg;

                if (aMsg.length > 0) {
                    aHtml.push('    <div class="chat-area">');

                    var areaHtml = [];
                    for (var m = 0, n = aMsg.length; m < n; m++) {
                        var oMsg = aMsg[m];
                        areaHtml.push('        <div class="chat-param">');
                        areaHtml.push('            <span class="text">');
                        areaHtml.push(oMsg['content']);
                        if (oMsg.emoji) {
                            areaHtml.push('                <span class="' + oMsg.emoji + '"></span>');
                        }
                        areaHtml.push('            </span>');
                        areaHtml.push('        </div>');
                    }
                    aHtml.push(areaHtml.join(''));

                    aHtml.push('    </div>');
                }

                aHtml.push('</div>');
            }
            aHtml.push('</div>');

            $chatMsgs.html(aHtml.join(''));
        }
    </script>