Question

我试图找到一种方法用jQuery替换:-)标记内的表情符号<li>。

期待：<li>Hi! <img class="smile"></img></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 docs

允许的内容无，它是一个空元素 标记省略必须有一个开始标记，不必须有结束标记。

所以最好将代码更正为

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

如何使用jQuery追加在li标签内添加img标签

1 个答案: