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

【问题标题】：Using JavaScript how do I insert html code into my page?使用 JavaScript 如何将 html 代码插入我的页面？
【发布时间】：2014-03-18 12:54:24
【问题描述】：

好的，所以我使用的是 xhtml 而不是 html。我正在使用隐藏的 xhtml 组件将数据发送到 JavaScript。数据是一个 JSON 数组。我想操作数据并对其添加 xhtml 标记进行格式化，然后发送回 xhtml 页面并显示它。如何将代码添加到元素？

我是否会这样做：

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 标签插入正文中？？

【问题讨论】：

标签： javascript jquery html jsf xhtml

【解决方案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" />

【讨论】：