programminghead Logo

JavaScript Can Change HTML Content Easily

Introduction :

Because of the JavaScript's properties Like innerHTML() in JavaScript, Functions like HTML()/text() in JQuery , Which Allows users to Change HTML Element's Content Easily. With the help of These Functions or Properties JavaScript Can Change HTML Content Easily.

JavaScript Can Change HTML Content [Example]



  <p id="mytxt">Old Text</p>
  <button onclick="changeTxt();">Click Me</button>

  <script>
      function changeTxt(){
        document.getElementById("mytxt").innerHTML="New Text";
      };
  </script>

Results

Old Text


Changing HTML Content using JavaScript

We are going to Change our HTML's Content using JavaScript. Where we'll be using the innerHTML() Function. JavaScript's innerHTML() Function Allows us to Get and Change HTML Element's Data (Like, All the Text from a Paragraphs).

JavaScript Can Change HTML Content [Extended Example]


<html>
 <body>

  <p id="mytxt">Click Any Buttom :</p>
  <button onclick="btnHi();">Say Hi</button>
  <button onclick="btnImGood();">Say I'm Good</button>
  <button onclick="btnThanks();">Say Thanks</button>

  <script>
      function btnHi(){
        document.getElementById("mytxt").innerHTML="Hello, How are You?";
      };
      function btnImGood(){
        document.getElementById("mytxt").innerHTML="That's Great, I'm so glad to hear that";
      };
      function btnThanks(){
        document.getElementById("mytxt").innerHTML="You Are Welcome";
      };
  </script>

 </body>
</html>

Results

Click Any Buttom :


javascript can change html element image

Changing HTML Content using JQuery

Inside JQuery we can use text() or html() function.
Where JQuery's text() Function can change HTML Element's Text Data (like, Text present inside a ParaGraph / Heading / button / List).
And JQuery's html() Function can Change HTML Element's HTML Data (like, HTML Elements inside Another Element like a Button inside an HTML Div ).

JQuery Can Change HTML Content [Extended Example]


<html>
 <body>

  <p id="mytxt">Click Any Buttom :</p>
  <button onclick="btnHi();">Say Hi</button>
  <button onclick="btnImGood();">Say I'm Good</button>
  <button onclick="btnThanks();">Say Thanks</button>

  <script>
      function btnHi(){
        $("#mytxt").text("Hello, How are You?);
      };
      function btnImGood(){
        $("#mytxt").text("That's Great, I'm so glad to hear that");
      };
      function btnThanks(){
        $("#mytxt").html("<u>You Are Welcome</u>");
      };
  </script>

 </body>
</html>

Results

Click Any Buttom :



More About : JavaScript Can Change HTML Contents

Changing HTML Content using JavaScript

Selecting HTML Elements:

we have 2 Different ways for Selecting HTML Elements so we can add/change there Contents.
1. Changing HTML Content by id
2. Changing HTML Content by Tag Name

Changing HTML Content by id :

We can use HTML Element's id to make change in the HTML Element's Content.
to select HTML Element's ID we have to use JavaScript's document.getElementById('') method.

document.getElementById('') Method :

Using JavaScript's document.getElementById('') Method we can select/target HTML's Elements in JavaScript so we can make change in the Element's Content.
here document targets the whole HTML Document and getElementById select the HTML Element of given ID Between the single/double quotes.
But this will only select HTML Element's id, to make change in the Content we have to use .innerHTML property for that.

.innerHTML property

after selecting HTML Element this JavaScript's .innerHTML property defines the HTML Content for Selected HTML Content.

Changing Content by id Example


<html>
 <head>
  <title>Changing Content by id </title>
 </head>
 <body>
   <p id="myparagraph"> </p>
   <script type="text/javascript">
     document.getElementById('myparagraph').innerHTML="text for HTML Element by JS";
   </script>

 </body>
</html>

Results


text for HTML Element by JS



Script Tag <script> :

Script tag is used to define JavaScript inside HTML Document.

type attribute type="" :

Type attribute defines the language of the script or format of the data inside Script tag.

document.getElementById('') method:

Using JavaScript's document.getElementById('') Method we can select/target HTML's Elements in JavaScript so we can make change in the Element's Content.

.innerHTML property :

after selecting HTML Element this JavaScript's .innerHTML property defines the HTML Content for Selected HTML Content.

Changing HTML Content by Tag Name :

We can use HTML Element's TagName to make change in the HTML Element's Content.
to select HTML Element's Tag we have to use JavaScript's document.getElementsByTagName('') method.

document.getElementsByTagName('') Method :

Using JavaScript's document.getElementsByTagName('') Method we can select/target HTML's Elements in JavaScript so we can make change in the Element's Content.
here document targets the whole HTML Document and getElementsByTagName('') select the HTML Element of given Tag Name Between the single/double quotes.
But this will select all HTML Elements if you have more then 1 elements created using same tag, But if you want to make change in only one HTML Element's content then you can create a Element with unique tag or you can give that Element unique id and change content using previous document.getElementById('') method.
if your HTML Document have multiple tag para tag and you still want to target that para tag, than you have to give index number document.getElementsByTagName('p')[0] after writing your tag name, so JavaScript can understand which tag to target. after selecting your HTML Element we have to use .innerHTML property to make change in the Element's Content.

.innerHTML property

work exactly the same for this method, after selecting HTML Element by TagName this JavaScript's .innerHTML property defines the HTML Content for Selected HTML Content.

Changing Content by TagName Example


<html>
 <head>
  <title>Changing Content by id </title>
 </head>
 <body>
    <p> first para </p><br/>
    <p> second para </p><br/>
    <p> third para </p>
   <script type="text/javascript">
     document.getElementsByTagName('p')[0].innerHTML="text of selected paragraph tag";
   </script>

 </body>
</html>

myjavascript.js file


text of selected paragraph tag


second para


third para


Script Tag <script> :

Script tag is used to define JavaScript inside HTML Document.

type attribute type="" :

Type attribute defines the language of the script or format of the data inside Script tag.

document.getElementById('') method:

Using JavaScript's document.getElementById('') Method we can select/target HTML's Elements in JavaScript so we can make change in the Element's Content.

.innerHTML property :

after selecting HTML Element this JavaScript's .innerHTML property defines the HTML Content for Selected HTML Content.

[0] index number after tagName :

in case of Multiple tags index [0] number helps JavaScript to target correct tag.
index number starts from 0 so
[0] is the first tag
[1] is the second tag
[2] is the third tag

Getting all HTML Document's Tag and id Name:

using "*" star parameter we can get all HTML Tags present on the current Document.
for that we have to just write "*" star parameter in the place of id and tag name and print that value in the output screen using document.write() method.

Comments

Write to Us

Captcha