Change Text inside HTML tags using Javascript

Question

0.00/5 (No votes)

See more:

can some one please help me how do i change Text that's between HTML elements using Javascript "if...else methods?

for example:
if that td tag equals "Hello"

HTML

<td>Hello</td>

then change text to "Hi":

HTML

<td>Hi</td>

Not onclick. just while loading the page

Posted 3-May-14 4:40am

Member 10749093

Add a Solution

3 solutions

Solution 1

I am not sure why would you change the values on load.

Anyway, you can use jQuery onready function to change the cell values.

Something to start with:

XML

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            $(this).find("td").html("Hi");
        });
    </script>
</head>
<body>

    <table>
        <tr>
            <td>Hello</td>
            <td>Hello</td>
            <td>Hello</td>
        </tr>
    <table>

</body>
</html>

Posted 3-May-14 5:35am

Manas Bhardwaj

Comments

Member 10749093 3-May-14 11:47am

thanks for your answer. but that your code it changes the whole td tags and it's fine. but do you know some how like that to change only tags that i want with same text? for example td tag has ID

Solution 2

use :eq() Selector[^]

JavaScript

$('td:eq("Hello")').html("Hi");

Posted 3-May-14 6:19am

DamithSL

Comments

Member 10749093 3-May-14 12:32pm

thanks for your answer. can you please be more clear how do i use it? ready function and how and on head or on body and do i need js file like this or not
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

DamithSL 3-May-14 12:36pm

yes, do the same way as Manas Bhardwaj's answer

Member 10749093 3-May-14 12:45pm

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$(document).ready(function() {
$('td:eq("Hello")').html("Hi");
});
</script>
</head>
<body>

<td>Hi</td>
</body>
</html>

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Xiao Ling · Accepted Answer · 2014-05-03T20:18:00

Here is the pure JS code. No jQuery needed:

XML

<body onload="replace()">
        <h1>New Web Project Page</h1>
        <table>
            <tr>
                <td>Hello</td>
                <td>world</td>
            </tr>
            <tr>
                <td>Hello</td>
                <td>world</td>
            </tr>
            <tr>
                <td>Hello</td>
                <td>world</td>
            </tr>
        <table>

        <script>
            function replace() {
                var matches = document.querySelectorAll("td");
                for(var index in matches) {
                    if (matches[index].textContent === "Hello") {
                        matches[index].textContent = "Hi";
                    }
                }
            }
        </script>
    </body>