jQuery - Append embed stream

Question

I am trying to append an embed livestream using jQuery's append method doing the following:

function whatever() {
    var $insaneLivestream = $('<iframe class="livestream" src="http://www.twitch.tv/gamesdonequick/embed" frameborder="0" scrolling="no" height="378" width="620"></iframe><a href="http://www.twitch.tv/gamesdonequick?tt_medium=live_embed&tt_content=text_link" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px;text-decoration:underline;"></a><iframe class="chat" src="http://www.twitch.tv/gamesdonequick/chat?popout=" frameborder="0" scrolling="no" height="600" width="350"></iframe>');
    $(".embedbox").append($insaneLivestream);   
}

Althought I thought this was supposed to work, the element seems to be created but not appended to embedbox at all. If I explicitly add the embed's DOM to the document it works like a charm.

Edit: also tried

$(document).ready(funtion() {
    $(".embedbox").html('<iframe class="livestream" src="http://www.twitch.tv/gamesdonequick/embed" frameborder="0" scrolling="no" height="378" width="620"></iframe><a href="http://www.twitch.tv/gamesdonequick?tt_medium=live_embed&tt_content=text_link" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px;text-decoration:underline;"></a><iframe class="chat" src="http://www.twitch.tv/gamesdonequick/chat?popout=" frameborder="0" scrolling="no" height="600" width="350"></iframe>')
});

and still doesn't work.

you dont have enough code here. `` is not valid HTML. And you set to that to `$livestream`, but then you are appending `$insaneLivestream`. — chiliNUT, Jan 10 '15 at 03:26
The code inside the braces are way too long, therefore I just wanted to make it shorter. Anyways I edited with the whole thing. And yes, livestream was a typo that wasn't in the document. Updated nethertheless. — Heinzen, Jan 10 '15 at 03:27

score 1 · Accepted Answer · edited May 23 '17 at 12:27

The key seems to be not the change to html() instead of append(), but just the ready. whatever() must have been getting called before the DOM was loaded. Also, were you actually calling whatever(), or just defining it?

I would venture that this would also work:

function whatever() {
    var $insaneLivestream = $('<iframe class="livestream" src="http://www.twitch.tv/gamesdonequick/embed" frameborder="0" scrolling="no" height="378" width="620"></iframe><a href="http://www.twitch.tv/gamesdonequick?tt_medium=live_embed&tt_content=text_link" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px;text-decoration:underline;"></a><iframe class="chat" src="http://www.twitch.tv/gamesdonequick/chat?popout=" frameborder="0" scrolling="no" height="600" width="350"></iframe>');
    $(".embedbox").append($insaneLivestream);   
}

$(document).ready(function () {
    whatever();
});

Additionally, $(document).append(//...) is bad syntax and will error out, see Why $(document).append() doesn't work in jQuery 1.9.1?

I've never tried to append to document, but I didn't know it didn't work, so that was interesting to learn when researching this question.

This works. Seems like I completely forgot to double-check (pun intended) to only load the iframe after the DOM elements were ready. You are indeed correct my friend, thanks a bunch! As for your question, I was calling it in my HTML script element. — Heinzen, Jan 10 '15 at 03:44

jQuery - Append embed stream

1 Answers1