Access item inside div through javascript

Question

I have a div which contain other tags inside it

<div id="mainDiv">
    <div>
        <table>
            <tbody>
                   <tr>
                      <td>1</td>
                      <td>item</td>
                      <td>item</td>
                      <td>2</td>
                   </tr>
            </tbody>
        </table>
    </div>

    <div>
        <table>
            <tbody>
                   <tr>
                      <td>1</td>
                      <td>item</td>
                      <td>item</td>
                      <td>5</td>
                   </tr>
            </tbody>
        </table>
    </div>
</div>

How can I access <td> of this mainDiv through javascript. I want to change innerHTML of these <td>

Brian · Accepted Answer · 2011-08-15 11:51:16Z

14

var allDivTd = document.getElementById("mainDiv").getElementsByTagName("TD");

for(var i = 0; i < allDivTd.length; i++){
    var td = allDivTd[i];
    td.innerHTML = // do something w/ inner html
}

answered Aug 15, 2011 at 11:51

Brian

2,78116 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

StuperUser · Accepted Answer · 2011-08-15 12:07:58Z

3

Using jQuery: $('div#mainDiv td') will return a set with all <td>s in it.

You can use .html() to modify the content of them. See http://jsfiddle.net/StuperUser/vD3Tk/ for an example.

Use jQuery if you're doing a lot of JS and have a lot of DOM manipulation to do. It has powerful and terse selector syntax from CSS, a lot of extension methods for DOM manipulation and cross browser compatibility. However, if you're only doing a small amount of JS, then don't feel it's necessary.

edited Aug 15, 2011 at 12:07

answered Aug 15, 2011 at 11:51

StuperUser

10.9k14 gold badges85 silver badges143 bronze badges

6 Comments

Brian Over a year ago

Edit your answer - you need a few quotes :)

MD Sayem Ahmed Over a year ago

It's good to refer to jquery for these kinds of situation. However, I would have +1'ed you if you give him the reasons to use jquery.

Colin Fine Over a year ago

Or in Prototype.js $$('div#mainDiv td')

StuperUser Over a year ago

@Sayem Ahmed, Brian's answer is accurate for the OP, since if he's only manipulating the table, using the jQuery library may be overkill. If he's doing a lot of JS then I've included some of the best reasons for using jQuery.

Brian Over a year ago

@StuperUser should be echoed a thousand times from the highest mountain. jQuery is not a substitute for JavaScript. It is a high demand framework that simplifies difficult tasks and chaining in JavaScript, and is not applicable to all scenarios. I find there are far too many folks out there that "know" jQuery and don't know JavaScript - a scenario I'd have thought to be impossible just a few years ago.

|

emboss · Accepted Answer · 2011-08-15 11:57:56Z

You can use document.getElementsByTagName to get all the tr tags, and then iterate over them for accessing the individual tds:

trs = document.getElementsByTagName('tr');
for (var i = 0; i < tr.length; i++) {
    var tds = trs[i].childNodes;
        for (var J = 0; j < tds.length; j++) {
            var td = tds.childNodes[j];
            // process td
        }
    }
}

Although , as you can see, this doesn't look to nice and is quite verbose. It's easier to use a Javascript framework such as jQuery, mootools, dojo... for these kinds of tasks. They support CSS selectors (e.g. jQuery) that let you traverse the DOM using CSS selectors, which are similar to XPath-style expressions and much more powerful than manual dom traversal with the few functions that Javascript originally provides for this.

Kevin Bowersox · Accepted Answer · 2011-08-15 11:52:25Z

1

var children = document.getElementById('mainDiv').getElementsByTagName('td');

answered Aug 15, 2011 at 11:52

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Collectives™ on Stack Overflow

Access item inside div through javascript

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related