我如何在帶有jQuery附加的li標簽內添加img標簽

Question

我試圖找到一種方法來用jQuery替換<li>標記內的笑臉:-) 。

期待： <li>Hi! <img class="smile"></img></li> <li>Hi! <img class="smile"></img></li>

正在獲取： <li>Hi! <img class="smile"></li> <li>Hi! <img class="smile"></li>

也許與DOM的操作有關。 但不幸的是，我無法弄清楚我在這里缺少什么。

<html>
    <head>
        <script src="https://code.jquery.com/jquery-latest.min.js"></script>
        <script>

            function apply_smileys(message) {
                // https://regex101.com/r/yS0eM4/1
                var regex_smile = /(:\))|(:-\))|(\(:)|(\(-:)/g;
                message = message.replace(regex_smile,'<img class="smile"></img>');
                return message;
            }

            $(document).ready(function() {
                var message = 'Hi! :)';
                message = apply_smileys(message);
                console.log(message);
                // Hi! <img class="smile"></img>
                $('<li>' + message + '</li>').appendTo('#my_list ul'); 
                // <li>Hi! <img class="smile"></li>
            });

        </script>
    </head>
    <body>
        <div id="my_list">
            <ul>
                <li>This is test</li>
            </ul>
        </div>
    </body>
</html>

Answer 1

您期待的是錯誤的事情，而您得到的是正確/有效的事情。

img標簽是自動關閉的（ 它們不能包含結束標簽 ）

引用MDN文檔

允許的內容無，它是一個空元素。
標簽省略必須具有開始標簽，並且不能具有結束標簽。

因此，最好將您的代碼更正為

message = message.replace(regex_smile,'<img class="smile">');

我如何在帶有jQuery附加的li標簽內添加img標簽

問題描述

1 個解決方案

解決方案1
2 2016-01-19 23:45:09

我如何在帶有jQuery附加的li標簽內添加img標簽

問題描述

1 個解決方案

解決方案1 2 2016-01-19 23:45:09

解決方案1
2 2016-01-19 23:45:09