-
Notifications
You must be signed in to change notification settings - Fork 3
/
05 Changing Content.html
41 lines (36 loc) · 1.84 KB
/
05 Changing Content.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
<html lang="en">
<head><title>Changing content</title>
</head>
<body>
<P id="text">This is some text</P>
<button id="button">change text</button>
<p id="text2">javascript is...</p><!-- adding some extra text to it / appending text to it-->
<button id="button2">Append Text</button>
<p id="text3"></p><!-- add text to this empty paragraph-->
<button id="button3">MakeText</button>
<!-- adding some text to it on both sides-->
<p id="text4">my name is</p>
<button id="button4">Add Text on both sides</button>
<script type="text/javascript">
document.getElementById("button").onclick=function(){
document.getElementById("text").innerHTML="Some New Text";
}
document.getElementById("button2").onclick=function(){
//appending some text to existed text
document.getElementById("text2").innerHTML=document.getElementById("text2").innerHTML+"Awesome";
// or can also do this
// document.getElementById("text2").innerHTML="I think "+document.getElementById("text2").innerHTML+"Awesome";
}
document.getElementById("button3").onclick=function(){
//document.getElementById("text3").innerHTML="Complete New Text";
// or do this
document.getElementById("text3").innerHTML="<h1>Complete New Text</h1>"
// we can put any html element there lists, forms, tables etc
}
// innerhtml is not a function its a value/content of the paragraph
document.getElementById("button4").onclick=function(){
document.getElementById("text4").innerHTML="Hi "+document.getElementById("text4").innerHTML+" JavaScript!";
}
</script>
</body>
</html>