retronav/.teddy-dom-manipulation.md

## .teddy-dom-manipulation.md

      
    Raw
  

              .teddy-dom-manipulation.md
            
          
    The Problem

If you are having problems with DOM manipulation, simply add all your DOM manipulation scripts as well as the TeddyTags declaration script with the defer attribute.
Working example with files attached.


## event.js
let lol = document.querySelector("#lol");
lol.addEventListener("click", () => {
  alert("Event Listener working");
});
let text = document.createElement("myHeader");
text.innerHTML = " Appended me??";
document.querySelector("#myHeader").appendChild(text);

## index.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/teddytags"></script>
    <script defer src="./event.js"></script>
</head>
<body>
    <myHeader name="header">Hello World!</myHeader>
    <lol>ClICK</lol>
    <script src="./tags.js"></script>
</body>
</html>

## tags.js
new Tag({name: 'myHeader', to: "h1"})
new Tag({name: 'lol', to: 'button'})
	let lol = document.querySelector("#lol");
	lol.addEventListener("click", () => {
	alert("Event Listener working");
	});
	let text = document.createElement("myHeader");
	text.innerHTML = " Appended me??";
	document.querySelector("#myHeader").appendChild(text);
	<!DOCTYPE html>
	<html lang="en">
	<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>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/teddytags"></script>
	<script defer src="./event.js"></script>
	</head>
	<body>
	<myHeader name="header">Hello World!</myHeader>
	<lol>ClICK</lol>
	<script src="./tags.js"></script>
	</body>
	</html>
	new Tag({name: 'myHeader', to: "h1"})
	new Tag({name: 'lol', to: 'button'})