johnnyferreiradev · February 28, 2020 00:48
diff --git a/aula27022020.html b/aula27022020.html
 <!DOCTYPE html>
 <html lang="pt">

 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<title>Aula 27022020</title>
 </head>

 <body>
 	<ol id="list">
 		<li>item 1</li>
 		<li>item 2</li>
 	</ol>

 	<script>
 		let text = document.createTextNode('Hello World');
 		let div = document.createElement('div');

 		div.append(text);
 		document.body.append(div);

 		//insert elements
 		
 		// list.before(div);
 		// list.after(div);
 		// list.prepend(div);
 		// list.append(div);
 		
 		const list = document.querySelector('#list');

 		const textShoppingList = document.createTextNode('Lista de compras');
 		const textLink = document.createTextNode('Link');
 		const textLastItem = document.createTextNode('Ultimo item');
 		const textAfterList = document.createTextNode('Alguns elementos acima são dinâmicos');

 		const elemParagraph = document.createElement('p');
 		const elemAnchor = document.createElement('a');
 		const elemListItem = document.createElement('li');
 		const elemListItem2 = document.createElement('li');
 		const elemParagraph2 = document.createElement('p');
 		const elemStrong = document.createElement('strong');

 		// add property href to a
 		elemAnchor.href = '#';

 		// populating elements
 		elemParagraph.append(textShoppingList);

 		elemAnchor.append(textLink);
 		elemListItem.append(elemAnchor);

 		elemListItem2.append(textLastItem);

 		elemStrong.append(textAfterList);
 		elemParagraph2.append(elemStrong);

 		// add elements to html
 		list.before(elemParagraph);
 		list.prepend(elemListItem);
 		list.append(elemListItem2);
 		list.after(elemParagraph2);

 		// use insertAdjacentHTML
 		div.insertAdjacentHTML('afterbegin', '<strong>Novo HTML <strong/>');

 		// const elemDiv = document.querySelector('div');
 		// console.log(elemDiv)
 		// elemDiv.innerHTML('<strong>teste<strong/>');
 	</script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="pt">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Aula 27022020</title>
	</head>

	<body>
	<ol id="list">
	<li>item 1</li>
	<li>item 2</li>
	</ol>

	<script>
	let text = document.createTextNode('Hello World');
	let div = document.createElement('div');

	div.append(text);
	document.body.append(div);

	//insert elements

	// list.before(div);
	// list.after(div);
	// list.prepend(div);
	// list.append(div);

	const list = document.querySelector('#list');

	const textShoppingList = document.createTextNode('Lista de compras');
	const textLink = document.createTextNode('Link');
	const textLastItem = document.createTextNode('Ultimo item');
	const textAfterList = document.createTextNode('Alguns elementos acima são dinâmicos');

	const elemParagraph = document.createElement('p');
	const elemAnchor = document.createElement('a');
	const elemListItem = document.createElement('li');
	const elemListItem2 = document.createElement('li');
	const elemParagraph2 = document.createElement('p');
	const elemStrong = document.createElement('strong');

	// add property href to a
	elemAnchor.href = '#';

	// populating elements
	elemParagraph.append(textShoppingList);

	elemAnchor.append(textLink);
	elemListItem.append(elemAnchor);

	elemListItem2.append(textLastItem);

	elemStrong.append(textAfterList);
	elemParagraph2.append(elemStrong);

	// add elements to html
	list.before(elemParagraph);
	list.prepend(elemListItem);
	list.append(elemListItem2);
	list.after(elemParagraph2);

	// use insertAdjacentHTML
	div.insertAdjacentHTML('afterbegin', '<strong>Novo HTML <strong/>');

	// const elemDiv = document.querySelector('div');
	// console.log(elemDiv)
	// elemDiv.innerHTML('<strong>teste<strong/>');
	</script>
	</body>

	</html>