-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcode3_DOM_JS.html
66 lines (66 loc) · 2.57 KB
/
code3_DOM_JS.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
<head>
<title>Using DOM</title>
</head>
<body>
<h1>DOM - Document Object Manipulation</h1>
<div>
<h2>Text in HTML</h2>
<div id="mainDiv">Text (Element) in html</div>
<script>
//Selecting an element from the document - the text
AnElement=document.getElementById("mainDiv");
console.log("lala", AnElement);
//Creating a paragraph element
var AParagraph=document.createElement("p");
AParagraph.appendChild(document.createTextNode("Text that I want to append, in new line"));
AnElement.appendChild(AParagraph);
</script>
</div>
<div>
<h2>Dynamical text and loops</h2>
<div id="secondDiv">Dynamical text and loops</div>
<script>
//Function to divide text in div, if we change div by p each line would be a paragraph
function divWithText(text){
var result=document.createElement("div");
var Node=document.createTextNode(text);
result.appendChild(Node);
return result;
}
for (i=0; i<10; i++){
secondDiv.appendChild(divWithText(i*i));
var t="Holaa";
var OtherNode=document.createTextNode(t); //To append here, we must create a node
secondDiv.appendChild(OtherNode);
}
x=divWithText("The End")
secondDiv.appendChild(x)
</script>
</div>
<div>
<h2>Text style</h2>
<div id="thirdDiv"></div>
<script>
//Function to assign position
function Position(text, x, y){
var node=divWithText(text);
node.setAttribute("style", "position:absolute; left:" + x + "px;top: "+y+"px;color:rgb("+text%255+","+10+",250)");
return node;
}
//Function to convert degrees to radians
function radians(v){
return v*(Math.PI/180);
}
//Computing position
for(i=0; i<360; i+=30){
thirdDiv.appendChild(Position(
String(i),
150 + 100*Math.cos(radians(i)),
900 + 100*Math.sin(radians(i))));
}
</script>
</div>
</div>
</body>
</html>