Adicionar Tag HTML com JavaScript
Adicionar Tag HTML com JavaScript
Em alguns momentos se torna necessário adicionar uma tag html dentro de outra e dependendo de com for você pode não ter acesso total ao código.
Um exemplo pode ser um plugin de WordPress, onde você não
pode editar o HTML mas necessita inserir algo ali mesmo que seja estático.
Vou mostrar de uma forma muito simples como usar o JS para
criar essa tag HTML.
Adicionando o HTML com JavaScript
Parar criar essa função que adiciona a Tag HTML é necessário
abrir o inspecionar do navegador e localizar a DIV ou até mesmo a Tag que vai guardar a Tag que deseja adicionar.
Procure por ID ou Class que seja especifico do
local para servi como rota e assim o JavaScript vai conseguir achar o local e
adicionar.
Criando o JavaScript para adicionar a Tag HTML
No exemplo abaixo vou mostrar como adicionar a tag IMG
dentro de um botão baseado na class do botão.
Primeiro vamos buscar o local e guardar em uma variável.
var local =
document.querySelector(".atendimento");
Segundo será a função carregada ao iniciar a página usando o
onload.
window.onload = function myFunction() {
}
E para finalizar, dentro da função que carrega ao iniciar a
pagina escrevemos o HTML completo colocando dentro do local que tem a class
“.atendimento".
local.innerHTML += '<img src="https://mastterglobal.com.br/wp-content/uploads/2020/05/whatsapp.png"
>';
Abaixo está o código completo.
var local = document.querySelector(".atendimento");
window.onload = function myFunction() {
local.innerHTML +=
'<img src="https://mastterglobal.com.br/wp-content/uploads/2020/05/whatsapp.png"
style= "height; 31px; width: 31px;">';
}
Se você gostou confira também como criar um botão WhatsApp
para o site no link abaixo.
Comentários
Postar um comentário