使用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是唯一的，你需要使用class：

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