InnerHTML of a div

Question

If you want to retrieve the innerHTML of a div (seen beneath) without using getElementByID (considering this website has several div's with 'quote' as an id), but by referring to the 'field name' (field="bid"). How would you do that?

<div nowrap="nowrap" id="quote" class="realtimeDetailLayer" source="lightstreamer" 
style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129"
field="bid">0,28</div>

I want to retrieve the information from an existing website. See beneath. Here you can see that several div's have the same ID

<tbody>
  <tr>
    <td style="text-align:right;width:auto;padding:8px 0px;"><nobr>Ref.</nobr>:</td>
    <td class="ext04" style="white-space:nowrap;width:12%;font-weight:bold;">
    EUR
      <strong><div nowrap=nowrap id="quote" class="realtimeDetailLayer" source="lightstreamer" style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129" field="reference">350,85
      </div></strong>
    </td>
    <td style="text-align:right;width:auto;padding:8px 0px;"><nobr>Bied</nobr>:</td>
    <td class="ext04" style="white-space:nowrap;width:12%;font-weight:bold;">
    EUR 
      <div nowrap=nowrap id="quote" class="realtimeDetailLayer" source="lightstreamer" style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129" field="bid">0,28</div>
    </td>
    <td style="text-align:right;width:auto;padding:8px 0px;">
      <nobr>Laat</nobr>:
    </td>
    <td class="ext04" style="white-space:nowrap;width:12%;font-weight:bold;">
    EUR
      <div nowrap=nowrap id="quote" class="realtimeDetailLayer" source="lightstreamer" style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129" field="ask">0,29
      </div>
    </td>
    <td style="text-align:right;width:auto;padding:8px 0px;"><nobr>%</nobr>:</td>
    <td class="ext04" style="white-space:nowrap;width:12%;font-weight:bold;">
      <div nowrap=nowrap id="quote" class="realtimeDetailLayer" source="lightstreamerGeneratedValues" style="display:inline" table="LS_ProductDetails_TabID" item="X0000010600NL0010379129" field="midchangepercent"><span class="extNegative"><nobr>-50,88 %</nobr></span>
      </div>
    </td>
  </tr>
</tbody>

look at http://stackoverflow.com/questions/9496427/how-to-get-elements-by-attribute-selector-w-native-javascript-w-o-queryselector — Oliver Watkins, Apr 26 '13 at 10:28
@Shiju you *can* have the same ID's on a page, but you *shouldn't* for this very reason. — RemarkLima, Apr 26 '13 at 10:29
IDs are supposed to be unique (the [standard](http://www.w3.org/TR/html401/struct/global.html#h-7.5.2) is quite clear about that). You should *never* have tags with the same ID in one page. If you need a name for grouping several tags use the `class` attribute. — Ansgar Wiechers, Apr 26 '13 at 10:30
@RemarkLima http://www.w3.org/TR/html401/struct/global.html#h-7.5.2 ids should be unique to the document they are used on — Pete, Apr 26 '13 at 10:32
@RemarkLima And even if you really accidentally have two `
`, jQuery will always give you the first one, `alert($('#quote').length)` will tell you it's 1. — Terry Young, Apr 26 '13 at 10:32
Guys, the point is you physically can have non-unique ID's, the page will be served and the browser will render it. However, you shouldn't as they're no longer an ID at that point *sigh* So, while you can all shout "YOU MUSTN'T HAVE THE SAME ID'S ON A PAGE!", people can, and do incorrectly, so the question is still valid - even if the answer is to correct your code so that all ID's are unique. — RemarkLima, Apr 26 '13 at 10:35
why not using field values as id, and then have unique id values? — Bojan Kovacevic, Apr 26 '13 at 10:36
@Michal I suggested jQuery simply in that you can loop through the DOM easier with it. No other reason. — RemarkLima, Apr 26 '13 at 10:37
@RemarkLima still you're missing the main problem. Duplicate IDs are invalid and one should never try to get around it by using alternative methods. — Mike, Apr 26 '13 at 10:40
@Michal Yes, I totally agree with you. I'm not missing the problem - in this instance the answer is to fix the code creating duplicate ID's. But for people to say "you can't have duplicate ID's" is incorrect, as there is no errors generated from this, the browser doesn't reject the HTML, so to the *layman* duplicate ID's do not pose a problem per se. Hence my initial stance, you *can* have duplicate ID's, but you shouldn't. Obviously, duplicate ID's in a complied language result in an error meaning that you can't have duplicate ID's. — RemarkLima, Apr 26 '13 at 10:44
@RemarkLima Theoretically you're right, but this is basically what professionals call "bad practice" and one should be avoid it like the plague. Browsers "allow" it because to support the ignorance of some low quality developers, but http://www.w3.org/TR/html401/struct/global.html#h-7.5.2 says clearly that "This name must be unique in a document." — Mike, Apr 26 '13 at 10:59
It's possible that the OP doesn't have access to change the HTML they're trying to work with. — Dan Iveson, Apr 26 '13 at 11:01

score 0 · Answer 1 · answered Apr 26 '13 at 10:29

0

You can do it by simply parsing the DOM that is by getting parent and children elements.

answered Apr 26 '13 at 10:29

Ruju

961
1
12
24

score 0 · Answer 2 · edited Apr 26 '13 at 10:36

0

Try the following:

els = document.getElementsByTagName('div');
for (i=0; i<els.length; i++) {
  if (els[i].field == 'bid') {
    //do whatever with the bid element here.
  }
}

This gets all the divs and checks the field attribute.

edited Apr 26 '13 at 10:36

dda

6,030
2
25
34

answered Apr 26 '13 at 10:34

Dan Iveson

926
6
10

score 0 · Answer 3 · answered Apr 26 '13 at 10:38

This solution is for the worst case scenario where you don't have any way to have unique ids for the elements

var divs = document.getElementsByTagName('div');
function getQuoteHtml(key){
    var i;
    for(i =0 ; i < divs.length; i++){
        if(divs[i].getAttribute('field') == key){
            return divs[i].innerHTML;
        }
    }
}

Demo: Fiddle

score 0 · Answer 4 · answered May 15 '13 at 10:05

0

you can use a css selector to do that

document.querySelectorAll('[field="bid"]');

answered May 15 '13 at 10:05

Mone

74
3

InnerHTML of a div

4 Answers4