CODEWITHSUNDEEP
javascriptiframe
RubyRube
RubyRube

Reputation: 602

Append Child only works first time for Iframe, cloneNode doesn't resolve

I'm building a web app to display videos from an environmental subreddit. The text and titles repeat OK using Append Child, but the video iframe only loads once.

http://codepen.io/Teeke/pen/KWaYRe

Here's the code of the node I want to repeat:

 node.innerHTML = `
   <h2 class="centered">
     <a href="${post.link}">
      <br>
     <iframe id="iframe-test" width="auto" height="auto" src="">
 </iframe>
<br>
      ${post.title} 
    </a>
  <br><br>
</h2>`;

I searched 'append child only works once' and found two sources.

So I've tried the following which comes from the second link.

 app.appendChild(node.cloneNode(true));

But it still doesn't work for me. I don't understand why js will clone the rest of the element but not the iframe.

Upvotes: 1

Views: 178

Answers (1)

Jean-Bernard Pellerin
Jean-Bernard Pellerin

Reputation: 12680

You need to assign a new id to your new i-frame.

So instead of cloning the object, create a new one with the same HTML string, but change the id every time. You could use a guid or generate an increasing numbers to have unique id's.

Upvotes: 1

Related Questions