JQuery 输出到 wordpress html 包装器

Question

尝试调用 YouTube API 将视频放置在我的网站上。

我正在使用 WordPress，我的 jQuery 在 functions.js 文件中。

视频加载到页面上，但它们完全位于我的包装之外。

我希望它们加载到我页面中的特定 div 中。 <br/><br/>

所以这是我的 jQuery 使用你的 Tube API 调用视频。

var playlistId = getParameterByName('playlistid');

jQuery.get("http://gdata.youtube.com/feeds/api/playlists/" + playlistId + "?v=2&alt=json", function (data) {
    //console.log(data);
    var playlistData = jQuery(data.feed.entry);
    jQuery.each(playlistData, function (index, video) {

        // console.log( video.media$group.yt$videoid);
        jQuery(document.body).append(getVideoHtml(video));
    });
    //console.log(playlistData);
});
//$(document.body).append('hello')

function getVideoHtml(video) {
    title = video.title.$t;
    url = video.content.src;
    views = video.yt$statistics.viewCount;
    dateCreated = video.published.$t;
    videoId = video.media$group.yt$videoid.$t;
    // console.log(videoId);
    videoHtml = "<div id=\"videos\"> \
        <p> \
     <iframe id=\"ytplayer" + videoId + "\" type=\"text/html\" width=\"300\" height=\"250\" \
      src=\"http://www.youtube.com/embed/" + videoId + "?autoplay=0&origin=http://example.com\" \
      frameborder=\"0\"/> \
      </p> \
      <p>" + title + "</p> \
      <p>views:" + views + "</p> \
      <p>date created: " + dateCreated + "</p> \
      </div>";
    return videoHtml;
}

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

这是我的 HTML，这里不多，但这是我希望放置视频的地方

<div id="video-section">

</div>

这是我得到的输出

<div id="wrapper">
    <div id="main">
        <header>
            <div class="logo">
                <img src="/images/logo.png">
            </div>
            <nav></nav>
        </header>
        <div id="video-section"></div>
        <footer>
            <div class="FooterLogo">
                <img src="/images/logo.png">
            </div>
            <div class="FooterText">
                <p>orem ipsum dolor sit amet, nec ad tota possim. Cu vis autem sonet soluta, sit libris debitis honestatis id. Lorem ipsum dolor sit amet, nec ad tota possim.</p>
                <p>Lorem ipsum dolor sit amet, nec ad tota possim. Cu vis autem sonet soluta, sit libris debitis honestatis id.</p>
            </div>
            <div class="FooterIcon">
                <li>Icon</li>
                <li>Icon</li>
                <li>Icon</li>
            </div>
        </footer>
        <div class="FootersFooter"></div>
        <div id="wpadminbar" class="" role="navigation"></div>
        <script src="http://dopepreview.co.uk/wp-content/themes/The Basis/_/js/functions.js"></script>
    </div>
</div>
<script type="text/javascript" src="http://dopepreview.co.uk/wp-includes/js/admin-bar.min.js?ver=3.8.1"></script>
<script type="text/javascript" src="http://dopepreview.co.uk/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.46.0-2013.11.21"></script>
<script type="text/javascript" src="http://dopepreview.co.uk/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=3.6"></script>
<div id="video-section">
    <p>
        <iframe id="ytplayer6-JfrvkX3u8" type="text/html" width="300" height="250" src="http://www.youtube.com/embed/6-JfrvkX3u8?autoplay=0&amp;origin=http://example.com" frameborder="0"></iframe>
    </p>
    <p>Rory Sky Show - Caskey (YMCMB) London Interview &amp; Freestyle</p>
    <p>views:2301</p>
    <p>date created: 2013-05-08T14:56:38.000Z</p>
</div>
<div id="video-section">
    <p>
        <iframe id="ytplayeraajud6ks4z8" type="text/html" width="300" height="250" src="http://www.youtube.com/embed/aajud6ks4z8?autoplay=0&amp;origin=http://example.com" frameborder="0"></iframe>
    </p>
    <p>The Rory Sky Show - Shystie Interview (New Music, Azelia Banks Beef &amp; More)</p>
    <p>views:1947</p>
    <p>date created: 2013-04-15T19:12:49.000Z</p>
</div>
<div id="video-section">
    <p>
        <iframe id="ytplayerRziNXcnMUbw" type="text/html" width="300" height="250" src="http://www.youtube.com/embed/RziNXcnMUbw?autoplay=0&amp;origin=http://example.com" frameborder="0"></iframe>
    </p>
    <p>The Rory Sky Show - Sasha Go Hard interview in London</p>
    <p>views:1002</p>
    <p>date created: 2013-11-12T23:15:18.000Z</p>
</div>

三个视频位于包装之外。

Answer 1

您不应该将文档正文更改为“视频部分”吗？

jQuery("#video-section").append(getVideoHtml(video));