0

Preciso inserir Tags em um site pelo console. Para ser mais específico, quero adicionar uma TAG <iframe></iframe>.

Já tentei usar o document.createElement('tag'), após isso adicionar os atributos da tag pelo appendChild. mas não tive sucesso.

Também tentei criar uma e adicionar a tag e atributos através de textos, mas não funcionou.

document.createElement('div').innerHTML="<iframe id="" frameborder="0" style="" scrolling="auto" src="" allowfullscreen></iframe> "
1
  • Pelo console? Não seria pelo javascript? Commented 29/01/2018 às 15:27

3 Respostas 3

1

Você pode usar o createElement(), seguido do appendChild().

var target = document.getElementById('target');

var elemento = document.createElement('iframe');
elemento.frameBorder = 0;
elemento.style = "";
elemento.scrolling = "";
elemento.src = "";
elemento.id = "novo-iframe";

target.appendChild(elemento);

console.log(document.getElementById('novo-iframe'));
<html>

<body>
  <div id="target"></div>
</body>

</html>

1

Seu último código não funcionou pois você não está inserindo o elemento criado na sua página, além de não está escapando as " (aspas) dos atributos.

Você também pode usar insertAdjacentHTML para inserir um código HTML em sua página.

element.insertAdjacentHTML("posição", "código-html);

Para controlar onde você quer o elemento, basta adicionar um dos valores abaixo no lugar de posição

beforebegin: Antes do Elemento

afterbegin: Dentro do elemento e antes do seu primeiro filho

beforeend: Dentro do elemento e depois do seu último filho

afterend: Após o elemento

// Captura o elemento onde queremos adicionar
var target = document.querySelector('#target');

// Código do iframe
var elemento = '<iframe frameborder="0" id="novo-iframe" src="/"></iframe>';

// Adicionamos o iframe dentro do elemento capturado
target.insertAdjacentHTML('beforeend', elemento);

// Exibidos o código do iframe criado no console
console.log(document.getElementById('novo-iframe'));
iframe {
  height: 14em;
  width: 100%
}
<div id="target"></div>


Com jQuery

$('#target').append('<iframe frameborder="0" id="novo-iframe" src="/"></iframe>');
iframe {
  height: 14em;
  width: 100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="target"></div>

0

O seguinte código deve servir:

var iframe = document.createElement('iframe');
iframe.id = '';
iframe.frameBorder = '0';
iframe.style = '';
iframe.scrolling = 'auto';
iframe.src = '';
iframe.allowFullscreen = 'true';
document.body.appendChild(iframe);

Primeiro cria um elemento com Document.createElement() , depois atribui valores ás propriedades do elemento (que representam os atributos do elemento) e no fim adiciona o elemento (iframe) ao elemento body com o método appendChild .

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .