javascript - 向 DOM 添加一个数组，每个元素为一个 li

Question

我正在尝试将此数组添加到 DOM，每个字符串元素都作为无序列表的一部分。下面我尝试设置 message[i] = 我要附加到列表的数组元素，但它似乎不起作用。Fetch new 是一个回调函数，它在输入 FYI 时获取字符串数组。基本上我试图在 ul 的底部显示该数组中的每个元素。ul class="messages" 仅供参考。我分配变量值的方式有问题吗？

   function fetchNew() {
        var PrintChat = function (Chat_Messages) {
        var y = Chat_Messages.length;
        for (i = 0; i < y; i++) {

            var message[i] = $('<li>Chat_Messages[i]<li>');
            $('.messages').append(message[i]);

        }
    }

Answer 1

我猜它实际上是在Chat_Messages[i]重复输出？

你必须告诉 JavaScript 它是一个要连接的变量。尝试这个：

$(".messages").append("<li>"+Chat_Messages[i]+"</li>");

请注意，出于安全原因，您应该确保正确转义消息，或者更好地使用本机 DOM 方法createTextNode(Chat_Messages[i])，例如保护您的站点免受 XSS 攻击。

Answer 2

如果 fetchNew 是一个获取字符串数组的回调，那么实际上你把它复杂化了，一个更简单的方法是这样的：

function fetchNew(myArray) {                           // receive the array as a parameter.
    var length = myArray.length;                       // Cache the length of array
    for (i = 0; i < length; i++) {                     // loop through the array.
        var element = $('<li>' + myArray[i] + '<li>'); // concatenate the current value inside an LI and create a dom element.
        $('.messages').append(element);                // Add element to the parent container
    }
}