<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Modificando HTML #01</title>
<link rel='stylesheet' href='css/estilo.css'>
<script src='js/jquery.js'></script>
</head>
<body class='conteudo exercicio'>
<h1>Modificando HTML #01</h1>
<div id='conteudo1'></div>
<div id='conteudo2'></div>
<div id='conteudo3'></div>
<div>Sem ID!</div>
<script>
// Conteúdo 1
$('#conteudo1').append('<p1>1<p/>')//selecionando a partir do id, foi adicionado um parágrafo 1
//Conteúdo 2, dentro de array é gerado 3 li (itens de 1 lista)
const elementos = [
$('<li>').append('Feijão'), $('<li>').append('Carne')
]
//adiciona 1 intem sorvete e depois os 3 li do array dentro da lista
const lista = $('<ul><li>Sorvete</li><ul>').append(elementos)
$('#conteudo2').append(lista)
// Conteúdo 3 (append via anexando)
$('#conteudo3').append(['<h1>1</h1>', '<h1>2</h1>']).prepend('<h1>0</h1>')//coloca o 0 antes do 1 e 2
//$('#conteudo3').html('<h1>1 2 3</h1>')// substitui o conteúdo acima por esse
//$('#conteudo3').text('<h1>123</h1>')
//alterando todos
//$('div').html('<strong>Todos !</strong>')
</script>
</body>
 |
| Saída 1 |
 |
| Saída 2 |
 |
| Saída 3 |
Nenhum comentário:
Postar um comentário