Here is the code i am using to change value of html element ***

<a class="classname" href="Vtech"> This text to be chnage</a>

<script type="text/javascript">
document.getElementsByClassName("classname")[0].innerHTML = "aaaaaaqwerty";
</script>

how can I change this text on page load instans

Here is the code i am using to change value of html element ***

<a class="classname" href="Vtech."> This text to be chnage</a>

<script type="text/javascript">
document.getElementsByClassName("classname")[0].innerHTML = "aaaaaaqwerty";
</script>

how can I change this text on page load instans

• javascript
• jquery
• class
• anchor
• innerhtml

• its working see here – Kartikeya Khosla Commented Jan 13, 2015 at 9:15

5 Answers 5

Seems you need to add DOMContentLoaded or put your script before </body>

Native JavaScript solution

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementsByClassName("classname")[0].innerHTML = "qwerty";
});

Add your script before </body>

Version with jQuery

$(funtion(){
   $(".classname:first").text("qwerty");
});

You can use css selector, but it can be not safe, because this method return first occurance:

document.querySelector(".classname");

By the way, almost all developers use some js framework: jQuery, prototype, extJs, etc

$(document).ready(funtion(){
    $(".classname").text("aaaaaaqwerty");
});

Using jquery (I refered to jquery, since you have tagged it in your question), you could achieve this like below:

$(funtion(){
    $("a .classname")[0].text("aaaaaaqwerty");
});

You could use this

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementsByClassName("classname")[0].innerHTML = "some texts";
});

Using jQuery

$(document).ready(function(){
   $(".classname").eq(0).val("aaaaaaqwerty");
});