Last active
May 2, 2020 19:52
-
-
Save marta-krzyk-dev/506de84cdd6e297bed8c4769ea81fef6 to your computer and use it in GitHub Desktop.
HTML with JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
</head> | |
<style> | |
.dummy { | |
color: red; | |
} | |
.dummy span { | |
color: orange; | |
} | |
.purple { | |
background-color: purple; | |
height: 100px; | |
width: 100px; | |
} | |
</style> | |
<body> | |
<div id='app'> | |
<p><span>I</span> should not be <span>colored</span> green</p> | |
</div> | |
<div id="test" class="dummy"> | |
<p> | |
Some <span id='yo'>dummy</span> text | |
</p> | |
</div> | |
<div class="purple dummy"> | |
Even more <span>dummy</span> text | |
</div> | |
<p>Horse</p> | |
<p>Unicorn</p> | |
<span>Dolphin</span> | |
<span>Parrot</span> | |
<div> | |
<ul id='members'> | |
<li class="purple">Dolphin</li> | |
<li>Parrot</li> | |
<li>Cat</li> | |
<li>Dog</li> | |
<li>Frog</li> | |
<li>Podlet</li> | |
</ul> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const allSpans = document.getElementsByTagName('span') | |
for (const prop of allSpans) { | |
// console.log(prop.innerHTML) | |
prop.innerHTML = prop.innerHTML} | |
const identifier = document.getElementById('yo') | |
identifier.innerHTML = '<h1>cookie</h1>' | |
const myApp = document.getElementById("app") | |
const specialWords = myApp.getElementsByTagName('span') | |
for(const w of specialWords) { | |
w.innerHTML = "TEST" | |
} | |
const membersUls = document.getElementById('members'); | |
const allMemberNames = membersUls.getElementsByTagName("LI"); | |
//allMemberNames[3].innerHTML = "Doggie Piesa" | |
for(let prop of allMemberNames) { | |
if (prop.innerText === "Dog") | |
prop.innerHTML = "<h1>Doggie Piesa</h1>" | |
} | |
const purpleDiv = document.querySelector(".purple") | |
//query selector stops at the first match | |
const purpleDivs = undefined; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
</head> | |
<style> | |
.dummy { | |
color: red; | |
} | |
.dummy span { | |
color: orange; | |
} | |
</style> | |
<body> | |
<div id='app'> | |
<p><span>I</span> should not be <span>colored</span> green</p> | |
</div> | |
<div id="test" class="dummy"> | |
<p> | |
Some <span id='yo'>dummy</span> text | |
</p> | |
</div> | |
<div class="dummy"> | |
Even more <span>dummy</span> text | |
</div> | |
<p>Horse</p> | |
<p>Unicorn</p> | |
<span>Dolphin</span> | |
<span>Parrot</span> | |
<div> | |
<ul id='members'> | |
<li>Dolphin</li> | |
<li>Parrot</li> | |
<li>Cat</li> | |
<li>Dog</li> | |
<li>Frog</li> | |
<li>Podlet</li> | |
</ul> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const allSpans = document.getElementsByTagName('span') | |
for (const prop of allSpans) { | |
// console.log(prop.innerHTML) | |
prop.innerHTML = prop.innerHTML} | |
const identifier = document.getElementById('yo') | |
identifier.innerHTML = '<h1>cookie</h1>' | |
const myApp = document.getElementById("app") | |
const specialWords = myApp.getElementsByTagName('span') | |
for(const w of specialWords) { | |
w.innerHTML = "TEST" | |
} | |
const membersUls = document.getElementById('members'); | |
const allMemberNames = membersUls.getElementsByTagName("LI"); | |
//allMemberNames[3].innerHTML = "Doggie Piesa" | |
for(let prop of allMemberNames) { | |
if (prop.innerText === "Dog") | |
prop.innerHTML = "<h1>Doggie Piesa</h1>" | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment