Making replace or append in a <p>?

Question

I was trying to make a append or replace in jQuery of an HTML, but I am not succeeding in it. It replaces only one of the <p> containing the class .frete-gratis but I wanted to replace them all with a iframe.

Follow the code I’m trying to make work currently:

var $wrapper = document.querySelector('.frete-gratis'),
// Pega a string do conteúdo atual
HTMLTemporario = $wrapper.innerHTML,
// Novo HTML que será inserido
HTMLNovo = '<iframe allowtransparency="true" src="http://aws.glamour.com.br/quero_bazar/flag-counts/index.html" height="20" width="140"></iframe>';

// Concatena as strings colocando o novoHTML antes do HTMLTemporario
HTMLTemporario = HTMLNovo + HTMLTemporario;

// Coloca a nova string(que é o HTML) no DOM
$wrapper.innerHTML = HTMLTemporario;

Answer 1

^{Note: You are not using jQuery but working with pure and hard Javascript.}

You’re using the method document.querySelector() that returns only the first element found:

Returns the first element Within the Document (using Depth-first pre-order Traversal of the Document’s nodes) that Matches the specified group of selectors.

That translated:

Returns the first element within the document (using the pre-order first-depth crossing of document nodes) that matches the specified group of selectors.

What you seek is the method document.querySelectorAll() that returns a list of items:

Returns a list of the Elements Within the Document (using Depth-first pre-order Traversal of the Document’s nodes) that match the specified group of selectors. The Object returned is a Nodelist.

That translated:

Returns a list of elements within the document (using the pre-order first-depth crossing of document nodes) that correspond to the specified group of selectors. The returned object is a Nodelist.

Your code would look like this:

var wrappers = document.querySelectorAll('.frete-gratis');

[].forEach.call(wrappers, function(wrap) {

  // fazer o que pretendes, por exemplo mudar a cor
  wrap.style.color = "red";
});

Answer 2

With jQuery you can use the method prepend (to add at the beginning of(s) element(s)) or append (to add at the end):

  // var é para variável ser local, não criando uma variável global tendo a possibilidade de dar conflito com outras bibliotecas.
  var HTMLNovo = '<iframe allowtransparency="true" src="http://aws.glamour.com.br/quero_bazar/flag-counts/index.html" height="20" width="140"></iframe>';
$('.frete-gratis').prepend(HTMLNovo);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="frete-gratis">DIV1: </div>
<div class="frete-gratis">DIV2: </div>
<div class="frete-gratis">DIV3: </div>
<div class="frete-gratis">DIV4: </div>