Help with innerHTML in Javascript

Question

I am trying to add a variable that contains an html element in my html file, I am trying to use innerHTML += mykey, the problem is, I have two elements to add, an iframe and a paragraph, when add iframe goes well, but the paragraph does not add.

function inserir() {
  let nomeVideo = document.querySelector('#nome-video').value;
  let linkVideo = document.querySelector('#link-video').value;
  let itemVideo = `<div class="items-video">
                   <iframe src="${linkVideo}" frameborder="0" allowfullscreen>
                   <p>${nomeVideo}</p>
                  </div>`;

  document.querySelector('#conteudo-videos').innerHTML += itemVideo;
}


<!--html-->
<div class="container-items" id="conteudo-videos">
</div>

What could I be doing wrong ?? remembering that I’m starting right now in javascript, so forgive the noobise.

Answer 1

First, take care of the Template Literals, Browser support is still small.

So instead of the Template Literals I will use Handlebars only to improve the compatibility of your code.

But the problem was, you’re forgetting to close your iframe.

var templateVideo = document.querySelector('#template-video');
var inserirVideo = document.querySelector('#inserir-video');
var nomeVideo = document.querySelector('#nome-video');
var linkVideo = document.querySelector('#link-video');
var conteudoVideo = document.querySelector('#conteudo-videos');

var template = Handlebars.compile(templateVideo.innerHTML);
var parser = new DOMParser();

function inserir() {
  var modelo = {
    linkVideo: linkVideo.value, 
    nomeVideo: nomeVideo.value
  };
  var htmlVideo = template(modelo);
  var itemVideo = parser.parseFromString(htmlVideo, "text/html").firstChild
  conteudoVideo.appendChild(itemVideo);
}

inserirVideo.addEventListener("click", inserir);

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.8/handlebars.js"></script>
<fieldset>
  <legend>Inserir Video</legend>
  <label>
    Nome:
    <input id="nome-video" type="text" />
  </label>
  <label>
    Link:
    <input id="link-video" type="text" />
  </label>
  <input id="inserir-video" type="button" value="Inserir" />
</fieldset>

<div class="container-items" id="conteudo-videos">
</div>

<script id="template-video" type="text/x-handlebars-template">
  <div class="items-video">
   <iframe src="{{linkVideo}}" frameborder="0" allowfullscreen></iframe>
   <p>{{nomeVideo}}</p>
  </div>
</script>

Answer 2

I saw that the error in your code is the lack of closing the iframe tag. I did a test here and it worked, follow:

function inserir() {
            let nomeVideo = "Teste Template String"
            let linkVideo = "https://www.youtube.com/embed/mKcZVZNDQPE"
            let itemVideo =
                `
                <div class="items-video">
                   <iframe src="${linkVideo}" frameborder="0" allowfullscreen></iframe>
                   <p>${nomeVideo}</p>
                </div>
                `;

            document.querySelector('#conteudo-videos').innerHTML += itemVideo;
        }

        inserir()

<div class="container-items" id="conteudo-videos">
    </div>

Regarding the comment about the compatibility of the String template, really. IE nor Opera have implemented it yet.

However, if compatibility is a crucial point for your problem, I suggest you take a look at Transpiler Babeljs.

What he does is make a "Downgrade" of his code written in ES6+ (more new functionality) for the ES5-javascript, code that all browsers understand.