Using JavaScript how do I insert html code into my page?

Question

Ok so I am using xhtml not html. I am getting data using a hidden xhtml component sending it to JavaScript. The data is a JSON array. I want to manipulate the data and format it adding xhtml tags and send back to the xhtml page and display it. How do I add the code to the < ul id="ticker01"> element?

Do I do something like:

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

Or like so with 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 page:

<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
    }                
});

Will either of these work or do I have to go up a tag level and insert the whole ul tag in the body??

Felix · Accepted Answer · 2014-03-18 13:08:22Z

2

Your code should work but you need to add # to target element by id:

chatMessages = $('.chatMessagesHidden');

Also, instead of for loop, you can use $.each()

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

I forgot to mention that id is unique, you need to use class instead:

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

edited Mar 18, 2014 at 13:08

answered Mar 18, 2014 at 12:58

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using JavaScript how do I insert html code into my page?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related