Help with innerHTML in Javascript

Question

Help with innerHTML in Javascript

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I'm trying to add a variable that contains an html element in my html file, I'm trying to use innerHTML + = myvar, the problem is, I have two elements to add, an iframe, and a paragraph when I add iframe goes 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 can I be doing wrong? remembering that I'm starting now in javascript, so please forgive noobise.

javascript html5

asked by anonymous 12.05.2017 / 21:23

2 answers

apply filter on return from a list Defining the color of a div in rgb

score 2 · Answer 1

First of all, beware of Template Literals , Browsers support is still small.

Then instead of Template Literals I will use Handlebars, just to improve the compatibility of your code.

But the problem was that 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>InserirVideo</legend><label>Nome:<inputid="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>

score 1 · 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, it follows:

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 and Opera have not implemented yet.

However, if compatibility is a crux for your problem, I suggest you take a look at Transpiler BabelJS .

What it does is to downgrade your code written in ES6 + (newer functionality) to the ES5- JavaScript code that all browsers note.