🥰➕😍
<!DOCTYPE html>
<html>
<head>
<title>Criar Tags HTML com JavaScript</title>
</head>
<body>
<script>
// Função para criar a tag h1 e adicioná-la à página
function criarH1() {
const h1 = document.createElement('h1');
h1.textContent = 'Este é um elemento h1';
document.body.appendChild(h1);
}
// Função para criar a tag img e adicioná-la à página
function criarImg() {
const img = document.createElement('img');
img.src = 'caminho/para/a/imagem.jpg';
document.body.appendChild(img);
}
// Função para criar a tag a e adicioná-la à página
function criarA() {
const a = document.createElement('a');
a.href = 'https://www.site.com';
a.textContent = 'Clique aqui';
document.body.appendChild(a);
}
// Chamar as funções para criar as tags
criarH1();
criarImg();
criarA();
</script>
<p><a href="https://blog.betrybe.com/desenvolvimento-web/comandos-e-tags-html/">TAGS HTML</a></p>
</body>
</html>
Outro método criar tags HTML com JS por ID!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Programa JavaScript</title>
</head>
<body>
<h1>Meu Programa JavaScript</h1>
<div id="tags"></div>
<div id="imagem"></div>
<div id="links"></div>
<div id="video"></div>
<div id="animacao"></div>
<script>
// Inserir texto em uma tag
const tagsDiv = document.getElementById('tags');
tagsDiv.innerHTML = '<p>Texto inserido em uma tag p</p>';
// Inserir imagem em uma tag
const imagemDiv = document.getElementById('imagem');
imagemDiv.innerHTML = '<img src="caminho/para/sua/imagem.jpg" alt="Descrição da imagem">';
// Criar link em uma tag
const linksDiv = document.getElementById('links');
linksDiv.innerHTML = '<a href="https://www.google.com">Link para o Google</a>';
// Inserir vídeo em uma tag
const videoDiv = document.getElementById('video');
videoDiv.innerHTML = '<video width="320" height="240" controls><source src="caminho/para/seu/video.mp4" type="video/mp4"></video>';
// Criar animação em uma tag
const animacaoDiv = document.getElementById('animacao');
animacaoDiv.innerHTML = '<div style="width: 100px; height: 100px; background-color: red; position: relative; animation: myanimation 5s infinite;"></div>';
</script>
</body>
</html>
CÓDIGO SIMPLES CODIFICAR JS; INJETAR HTML COM JAVASCRIPT E CSS!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programa JavaScript</title>
</head>
<body>
<div id="output"></div>
<script>
const output = document.getElementById('output');
const styles = `
<style>
body {
background-color: lightblue;
}
h1 {
color: red;
}
</style>
`;
const htmlTags = `
<h1>Olá, mundo!</h1>
<p>Este é um exemplo de injetar automaticamente estilos e tags HTML usando JavaScript!</p>
<img src="https://centraldecursos.com/wp-content/uploads/2015/12/apresentacao-power-point-187.gif"width="100%">
<a href="https://livrosmcegonha.blogspot.com/">click em mim</a>`;
output.innerHTML = styles + htmlTags;
</script>
<a href="https://www.tutorialrepublic.com/html-reference/html5-tags.php">TODAS AS TAGS HTML</a>
</body>
</html>
CRIAR TODO O HTML EM JAVASCRIPT!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programa JavaScript</title>
</head>
<body>
<script>
// Cria um elemento HTML com determinadas propriedades e conteúdo
function createElement(tagName, attributes, content) {
const element = document.createElement(tagName);
Object.keys(attributes).forEach(attribute => {
element.setAttribute(attribute, attributes[attribute]);
});
if (content) {
element.textContent = content;
}
return element;
}
// Cria o HTML automaticamente
function createHtml() {
const body = document.querySelector('body');
// Cria um título
const title = createElement('h1', {}, 'Meu Programa em JavaScript');
// Cria uma lista com itens
const list = createElement('ul', { class: 'list' });
const items = ['Item 1', 'Item 2', 'Item 3'];
items.forEach(item => {
const listItem = createElement('li', {}, item);
list.appendChild(listItem);
});
// Adiciona os elementos ao body
body.appendChild(title);
body.appendChild(list);
}
// Chama a função para criar o HTML
createHtml();
</script>
<a href="https://www.tutorialrepublic.com/html-reference/html5-tags.php">TODAS AS TAGS HTML</a>
</body>
</html>