Skip to content

Commit bec838e

Browse files
ProjectRavelProjectRavel
committed
Memmbuat Manipulasi Method
1 parent d7a25a6 commit bec838e

4 files changed

Lines changed: 93 additions & 0 deletions

File tree

2. Manipulasi Element & Method/index.html renamed to 2. Manipulasi Element/index.html

File renamed without changes.

2. Manipulasi Element & Method/script.js renamed to 2. Manipulasi Element/script.js

File renamed without changes.

‎3. Manipulasi Method/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Dom Selection</title>
6+
<style>
7+
* {
8+
border: 2px solid #dedede;
9+
padding: 15px;
10+
margin: 15px;
11+
}
12+
html {
13+
margin: 0;
14+
padding: 0;
15+
}
16+
body {
17+
max-width: 600px;
18+
margin: 30px auto;
19+
font-family: sans-serif;
20+
color: #333;
21+
}
22+
23+
24+
</style>
25+
</head>
26+
<body>
27+
28+
<h1 id="judul">Hello World</h1>
29+
<div id="container">
30+
<section id="a">
31+
<p class="p1">paragraf 1</p>
32+
<a href="http://instagram.com/rulvyy">Instagram Rafael Pandu</a>
33+
<p class="p2">paragraf 2</p>
34+
<p class="p3">paragraf 3</p>
35+
</section>
36+
<section id="b">
37+
<p>paragraf 4</p>
38+
<ul>
39+
<li>item 1</li>
40+
<li>item 2</li>
41+
<li>item 3</li>
42+
</ul>
43+
</section>
44+
</div>
45+
46+
<script src="script.js"></script>
47+
</body>
48+
</html>

‎3. Manipulasi Method/script.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// Manipulasi Node
2+
3+
const pBaru = document.createElement('p'); // .createElement berfungsi untuk menambahkan tag element pada HTML
4+
const teksBaru = document.createTextNode('Paragraf Baru'); // .createTextNode berfungsi untuk membuat text ke dalam memori
5+
6+
// simpan tulisan ke dalam paragraf
7+
pBaru.appendChild(teksBaru); //ini bayangkan saja bahwa vas(pBaru) ya diisi bunga(teksbaru)
8+
9+
// simpan pBaru ke akhir section a
10+
const sectA = document.querySelector('section#a');
11+
sectA.appendChild(pBaru)
12+
13+
const liBaru = document.createElement('li');
14+
const liTeks = document.createTextNode('List Baru');
15+
16+
liBaru.appendChild(liTeks);
17+
18+
const sectB = document.querySelector('#b ul');
19+
const liB = sectB.querySelectorAll('li');
20+
21+
sectB.insertBefore(liBaru, liB[1])
22+
23+
const link = document.querySelector('a');
24+
sectA.removeChild(link)
25+
26+
// const h2 = document.createElement('h2');
27+
// const h2Text = document.createTextNode('Ini adalah h2');
28+
// const paragrafB = document.querySelector('section#b p')
29+
const paragrafB = document.querySelector('section#b p')
30+
31+
// h2.appendChild(h2Text)
32+
// sectionB.removeChild(paragrafB)
33+
34+
// sectionB.insertBefore(h2, sectB)
35+
const sectionB = document.querySelector('section#b');
36+
const h2 = document.createElement('h2');
37+
const h2Text = document.createTextNode('Ini adalah h2');
38+
39+
h2.appendChild(h2Text)
40+
41+
sectionB.replaceChild(h2, paragrafB)
42+
43+
44+
45+

0 commit comments

Comments
 (0)