javascript - 如何使用 JavaScript 将 html 代码插入我的页面？

Question

好吧，我使用的是 xhtml 而不是 html。我正在使用隐藏的 xhtml 组件获取数据并将其发送到 JavaScript。数据是一个 JSON 数组。我想操作数据并格式化它，添加 xhtml 标签，然后发送回 xhtml 页面并显示它。如何将代码添加到 < ul id="ticker01"> 元素？

我会做这样的事情吗:

var ticker01 = document.getElementById("ticker01");
ticker01.innerhtml = "<li><span>[15:38:00]</span><a href="#">Red fish</a></li><li><span>[15:39:00]</span><a href="#">Blue fish</a></li>"

或者像 jQuery 一样:

$( "<li><span>[15:38:00]</span><a href="#">Red fish</a></li><li><span>[15:39:00]</span><a href="#">Blue fish</a></li>" ).appendTo( "ticker01" );

xhtml 页面:

<h:body>
<h:inputText id="chatMessagesHidden" value="#{chatRoom.msgsAsJson}" style="display: none" />
        <ul id="ticker01">
                <li><span>[15:38:00]</span><a href="#">Red fish</a></li>
                <li><span>[15:39:00]</span><a href="#">Blue fish</a></li>
                <li><span>[15:39:30]</span><a href="#">Old fish</a></li>
                <li><span>[15:39:30]</span><a href="#">New fish</a></li>                    
        </ul>
</h:body>

JavaScript:

var chatMessages;
var chatMsg;

$(document).ready(function() {
    chatMessages = $('chatMessagesHidden');

    for (var i=0; i < chatMessages.length; i++) {
        chatMsg = chatMessages[i];
    // Manipulate the data to send back to xhtml page
    }                
});

这两种方法都有效吗？还是我必须提升标签级别并将整个 ul 标签插入正文中？

Answer 1

您的代码应该可以工作，但您需要通过 id 将 # 添加到目标元素:

chatMessages = $('.chatMessagesHidden');

此外，您可以使用 $.each() 来代替 for 循环

$.each($('.chatMessagesHidden'), function(i) {
    chatMsg = chatMessages[i];
    // Manipulate the data to send back to xhtml page
});

<小时/>

我忘了提及 id 是唯一的，您需要使用类来代替:

<h:inputText class="chatMessagesHidden" value="#{chatRoom.msgsAsJson}" style="display: none" />