How to append text in multiple divs jQuery/JS

Question

I'm a noobie when it comes to jQuery/JavaScript, so I've been playing around with it. I'm extending off the codepen here: http://codepen.io/chantific/pen/XbrdEg. What I want to do is append the text I have in my "youtube-title" div to my "play-button" div. However, the obvious problem is the text in all three divs are appended to the "play-button" div in all three cases. I was wondering if I could append each div's contents separately? Here's my codepen:http://codepen.io/anon/pen/ZbBajz

Instead of:

Video1 
man
pig
babe

Video2
man
pig
babe

Video3
man
pig
babe

This is what I want:

Video1
man

Video2
pig

Video3
babe


<div class="youtube-container">
  <div class="youtube-player" data-id="b3DRdtSAHrY"></div>
  <div class ="youtube-title"><p>man</p></div>
</div>

<div class="youtube-container">
  <div class="youtube-player" data-id="b3DRdtSAHrY"></div>
  <div class ="youtube-title"><p>pig</p></div>
</div>

<div class="youtube-container">
  <div class="youtube-player" data-id="b3DRdtSAHrY"></div>
  <div class ="youtube-title"><p>babe</p></div>
</div>

//JS/jQuery

(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();
function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=0&border=0&wmode=opaque&enablejsapi=1&controls=2");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
$(".youtube-title")
    .appendTo(".play-button");

Appreciate the help.

score 0 · Accepted Answer · answered Sep 27 '15 at 21:35

Seems pretty simple, but you should do some changes, because the html doesn´t look good.

You have three identical pieces of HTML, so make them different if you want to paste different things to them. For instance adding a second class to the container

<div class="youtube-container otherclass">
  <div class="youtube-player" data-id="b3DRdtSAHrY"></div>
  <div class ="youtube-title"><p>man</p></div>
</div>

(You can also add a data attribute, id, whatever you want)

Then you could change a little bit your js to paste the code to every div for instance:

function pasteText($selector) {
  //Selector must be a valid jQuery selector.
  $selector
     .appendTo(".play-button");
}

//And then you call it for every div you need, with the right selector
//pasteText($(".youtube-container.otherclass"))

I'm not giving you the coded solution completed, but I think that you will get the idea. Hope it helps.

Just the direction I needed. Thanks very much. – user2891309 Sep 28 '15 at 00:54 — user2891309, Sep 28 '15 at 00:54

How to append text in multiple divs jQuery/JS

1 Answers1