Header Ads Widget

How to change content of HTML element using javascript.

My codding spot September 11, 2021

 Javascript decides behaviour of web page. Using javascript you can edit, delete, change and display the HTML element and it’s content.

This post is about how HTML content is modified by javascript.

HTML DOM elements allow javascript to change content of HTML element. 

What is JavaScript HTML DOM?

The HTML DOM (Document Object Model) is logical structure of HTML elements. It represents each node (element)  as object. It defines methods, properties and events for all HTML elements. DOM is constructed as logical tree of objects.

For Javascript HTML DOM is Application Programming Interface (API). Javascript can add, delete, and modify elements, it’s attribute, it’s CSS styles and events.

Before changing element’s content first you have to find HTML element.

Finding and accessing HTML element by DOM methods and property 

1. By id
2. By class name
3. By tag name
4. By CSS selector
5. By HTML object

• By id

Following example find <p> element by id “fetch” and display text by using property “inner.HTML”.


<!DOCTYPE html>
<html>
<head>
<title>Finding and accessing elements</title>
</head>
<body>
<p id="fetch">Fetching content by id</p>
<p id="demo"></p>
<script>
var e=
document.getElementById("fetch");
document.getElementById("demo").innerHTML="The content of paragraph is:- "+e.innerHTML;
</script>
</body>
</html>

Output:-
Fetching content by id

• By class name

Following example find <h2> element by class name ”find”.


<!DOCTYPE html>
<html>
<head>
<title>Finding and accessing elements</title>
</head>
<body>
<h2 class="find">Fetching content by class name</h2>
<h3 id="display"></h3>
<script>
var a=document.getElementsByClassName("find");
document.getElementById("display").innerHTML="The heading is:-"+ a[0].innerHTML;
</script>
</body>
</html>

Output:-
Fetching content by class name

• By tag name

Following example find <p> element by specifying tag name .

<!DOCTYPE html>
<html>
<head>
<title>Finding and accessing elements</title>
</head>
<body>
<p>Fetching content by tag name.</p>
<p id="tags"></p>
<script>
var t=document.getElementsByTagName("p");
document.getElementById("tags").innerHTML="The content is:-"+t[0].innerHTML;
</script>
</body>
</html>

Output:-
Fetching content by tag name

• By CSS selector

Following example find <p> element by queryselectorall() method.

<!DOCTYPE html>
<html>
<head>
<title>Finding and accessing elements</title>
</head>
<body>
<p class="demo">Hello World</p>
<p id="sel"></p>
<script>
var q=document.querySelectorAll("p.demo");
document.getElementById("sel").innerHTML="Content is:-"+q[0].innerHTML;
</script>
</body>
</html>

Output:-
Finding content by querySelectorAll ()

• By HTML object

You can find and access any HTML element using various HTML object.
Here is the list:
- document.head
- document.title
- document.body
- document.link
- document.images
- document.embeds
- document.forms
- document.scripts
- document.documentElement
- document.anchor

Following example display title  using document.title object.

<!DOCTYPE html>
<html>
<head>
<title>Finding and accessing elements</title>
</head>
<body>
<p id="sel"></p>
<script>
document.getElementById("sel").innerHTML="The title is:"+document.title;
</script>
</body>
</html>

Output:-
DOM object document.title

document.getElementById() method is fetching element by specified id attribute.

document.getElementsByClassName() method fetch all HTML elements by specified class name.

document.getElementsByTagName() method fetch all element which element (tag) name is specified in bracket.

document.querySelectorAll() method fetching all elements by specified CSS selectors.

innerHTML property

The innerHTML property is used for every elements. innerHTML property display the content between start and end tags. It also changes the content of elements.

How to change the content of HTML element?

As discussed above innerHTML property modify the content of HTML element.

Example
Following example shows how text (“welcome”) in between <h1></h1> tag changes to text “Hello”.


<!DOCTYPE html>
<html>
<head>
<title>Change content</title>
</head>
<body>
<h1 id="i1">Welcome</h1>
<p>The text welcome is changes to text Hello.</p>
<script>
var head=document.getElementById("i1");
document.getElementById("i1").innerHTML="Hello";
</script>
</body>
</html>

Output:-
Change text by id

Modify the CSS style by dom method 

To change remove innerHTML property and put style property and it’s value.

document.getElementById(“id_name”). style.css_property=”value”;

Example
Following example change the font size of  element <p> to “24px”, color to red and make text bold.


<!DOCTYPE html>
<html>
<head>
<title>Change content</title>
</head>
<body>
<p id="js">Hello Javascript!</p>
<script>
var s=document.getElementById("js");
document.getElementById("js").style.fontSize="24px";
document.getElementById("js").style.fontWeight="bold";
document.getElementById("js").style.color="red";
</script>
</body>
</html>

Output:-
Modify CSS styles

Modifying HTML attribute value by DOM method 

To change value of attribute write attribute name in place of innerHTML property.

document.getElementById(“id_name”). attribute_name=”value”;

Example
Following example change the value of text input “Hello” to “HTML” by clicking on button. DOM method specified in onclick event.


<!DOCTYPE html>
<html>
<head>
<title>Change Content</title>
</head>
<body>
<input type="text" name="text" id="txt" value="Hello"> 
<button type="button" onclick='document.getElementById("txt").value="HTML"'>clickme</button>
</body>
</html>

Output:-

Here is another example of <img> element modify src attribute value. The original image is a flower drawing, but javascript modify image to another drawing.

<!DOCTYPE html>
<html>
<head>
<title>Change Content</title>
</head>
<body>
<img id="pic" src="/Drawing/image_2021-09-01_22-02.jpg" height="200" width="200"></img>
<script>
document.getElementById("pic").src="/Drawing/image_2021-09-04_21-19.png";
</script>
</body>
</html>

Output:-
Modify attribute value

Hiding/showing HTML element by DOM method

Javascript allow you to hide/ show HTML element using display property.

Example
Following example hides the image using display property.


<!DOCTYPE html>
<html>
<head>
<title>Change Content</title>
</head>
<body>
<img id="pic" src="/storage/emulated/0/Drawing/image_2021-09-01_22-02.jpg" height="200" width="200"></img>
<script>
document.getElementById("pic").style.display="none";
</script>
</body>
</html>

Example 

 how to change and delete the list items using HTML DOM method.


<!DOCTYPE html>
<html>
<head>
<title>Edit list</title>
<style>
div{
height:auto;
width:300px;
padding:10px;
background-color:#033;
box-shadow:5px 3px 3px #000;}
h2{
color:#f00;
text-align:center;}
li{
color:#ffc;}
button{
margin-left:20px;
color:#aaa;
background-color:#b02;
border-radius:10px;}
</style>
</head>
<body>
<div>
<h2>Fruit list for buying</h2>
<ol id="fruit">
<li id="f1">Apple</li>
<li id="f2">Cherry</li>
<li id="f3">Banana</li>
<li id="f4">Grapes</li>
</ol>
<button type="button" onclick="change()" >Change list</button>
<button type="button" onclick="del()" >Hide list</button>
</div>
<script>
function change()
{
document.getElementById("f1").innerHTML="Mango";
document.getElementById("f2").innerHTML="Orange";
document.getElementById("f3").innerHTML="Gauva";
document.getElementById("f4").innerHTML="Lichi";
}
function del()
{
document.getElementById("fruit").style.display="none";
}
</script>
</body>
</html>

Output:-



Explanation

• In example list of 4 fruits are created. Two buttons added to change and hides fruit items from the list.
• The change() function changes list of 4 fruits with another 4 fruits. Each <li> element has unique Id (f1,f2,f3,f4). Fetching content of lists by their ids and changed them using innerHTML property.
• The del() function hide the whole list. To hide whole list id is specified in <ol> element. Using this id whole list is removed.
• Call these two functions on onclick event defined in buttons.

Following example change emoji , replace text with emoji and also hide the text using HTML DOM method.


<!Doctype html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
button{height:50px;
width:100px;
color:#fff;
background-color:black;}
</style>
</head>
<body>
  <p id="smile" style="font-size:55px">&#128515</p>
  <button type="button" onclick='document.getElementById("smile").innerHTML="&#128542"'>SAD</button>
   <p id="smile1" style="font-size:55px">I'm Happy.</p>
  <button type="button" onclick='document.getElementById("smile1").innerHTML="&#128522"'>Click me!</button>
   <p id="hide" style="font-size:55px">Hide me!</p>
  <button type="button" onclick='document.getElementById("hide").style.display="none"'>Hide</button>
</body>
</html>

Output:-

Conclusion

The getElementById() is easy and most popular method. It directly work with HTML. 

There is a minor difference in  between document.getElementById() and document.getElementsByClassName() and document.getElementsByTagName() methods. 
The difference is of word element. The dom id method contains "element" and dom classname and tagname methods contains "elements".


Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments