Click here to Skip to main content
15,389,833 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I want to change the content of two p tags out of four p tags.
All of the the p tags are having same class.
I want to change the content by classname.

I tried using array of list elements.

What I have tried:

I tried for list.

<!DOCTYPE html>

  • Tea
  • Tea
  • Tea
  • Tea

Try it

function myFunction() {
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
list.getElementsByClassName("child")[2].innerHTML = "Coffee";
Updated 19-May-17 0:50am
Mehedi Shams 17-May-17 1:08am
Hi Member 13205250,

You said all the paragraph elements use the same class, but I see you are using two classes - "example" and "child". This is confusing. Are you using nested paragraphs? Please post your HTML code and explain a bit more.

Rethink how you do things.

1 - give your <p> elements id's.
2 - getElementById("the_id_you_set").innerHTML='coffee'
3 - done.

Works for essentially all elements.

When you start using AJAX, this becomes essential.

var p = document.getElementsByTagName("p");
for(var i=0;i<p.length; i++) {
    if(p[i].innerHTML == "Tea") {
        p[i].innerHTML = "Milk";

<pre>var p = document.getElementsByTagName("p");
for(var i=2;i<p.length; i++) {
    if(p[i].innerHTML == "Tea") {
        p[i].innerHTML = "Coffee";

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900