www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons JavaScript: HTML Manipulation Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
Lesson 28
Lesson 29
Lesson 30
Lesson 31
Lesson 32
Lesson 33
Lesson 34
Lesson 35
Lesson 36
Lesson 37
Lesson 38
Lesson 39
Lesson 40
Lesson 41
Lesson 42
Lesson 43
Lesson 44
Lesson 45
Lesson 46
Lesson 47
Lesson 48
Lesson 49

In JavaScript we use the write() function of the document object as document.write() to write directly to the HTML document.

document.write("Hello world!");

We can also output HTML tags through the write() function:

document.write("<h1>Hello world!</h1>");


Important: Do not ever use the document.write() function after a document is loaded, as it will overwrite the document!

Modifying the HTML of a web page through JavaScript:
We use the innerHTML property to modify the content of an element in an HTML document. The syntax follows:

document.getElementById( id ).innerHTML= new HTML

The following code example changes the HTML of a web page:

<html>
<body>

<p id="hw">Hello World!</p>

<script>
document.getElementById("hw").innerHTML="Hello World again! ";
</script>

</body>
</html>


The above HTML web page has an element p with the id="hw". We first get the element having the id="hw" and then we use its innerHTML property to make changes to it.

Changing an HTML Attribute
Changing the attribute of an HTML element is very simple. We use the attribute property of the HTML element to change the attribute. The syntax follows:

document.getElementById( id ). attribute=new value

The following example changes the href attribute of the <a> tag:

<!DOCTYPE html>
<html>
<body>

<a href="http://pickatutorial.com" id="hrf">Computer Tutorials</a>
<script type="text/JavaScript">
document.getElementById("hrf").href = "http://pickatutorial.com/index.htm";
</script>

</body>
</html>


Changing HTML Style
We use the following syntax to change the style of an HTML element:

document.getElementById( id ).style. property = new style

The following example changes the style of a <p> element:

<html>
<body>

<p id="hw">Hello World!</p>

<script>
document.getElementById("hw").style.color="orange";
</script>
</body>
</html>


Next >>> Lesson No. 48: Adding and Removing HTML







Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.