CRIAR TAGS HTML COM JAVASCRIPT

🥰➕😍

<!DOCTYPE html>

<html>

<head>

<title>Criar Tags HTML com JavaScript</title>

</head>

<body>

// 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>

</body>

</html>

Outro método criar tags HTML com JS por ID!

<!DOCTYPE html>

<head>

<title>Meu Programa JavaScript</title>

</head>

<body>

<h1>Meu Programa JavaScript</h1>

// 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>

<head>

<title>Programa JavaScript</title>

</head>

<body>

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>

<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>

<head>

<title>Programa JavaScript</title>

</head>

<body>

// 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>