Question

好的，所以我使用的是xhtml而不是html。我使用隐藏的xhtml组件将数据发送到JavaScript获取数据。数据是JSON数组。我想操纵数据并格式化它添加xhtml标签并发送回xhtml页面并显示它。如何将代码添加到＆lt; ul id =“ticker01”＆gt; 元素？

我是否会这样做：

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" />

使用JavaScript如何在我的页面中插入HTML代码？

1 个答案: