Get div class with javascript?

Question

I need to find/get a class called "group" from a div-tag, with javascript. after that i want to insert a html button(input=submit) inside that div i just found.

How can this be done with javascript ?

i've tryed this so far, but gets and error: document is not declared!

var myMessage = 'Mange tak';
var html_kode = '<input type="submit" onclick="clickedelm = this.value" id="qr_tak" tabindex="1" name="sbutton" title="(Alt + A)" accesskey="a" value="Auto Tak" class="button">';

if(myMessage) {
        var find_class = document.getElementsByClassName('group');
        if (find_class) {
            find_class.innerHTML += html_kode;
        }
    }

JavaScript complaining about document not defined hints for something very wrong with your code. That code is placed in a real HTML page? Doctype compliant? — Albireo
– Albireo, Commented Jul 12, 2011 at 12:00
It's a .js file im making.. Trying to make it for Greasemonkey on firefox — Patrick R
– Patrick R, Commented Jul 12, 2011 at 12:07
If it's for GreaseMonkey, check my answer, I modify the DOM that way and it works. — Albireo
– Albireo, Commented Jul 12, 2011 at 12:18

TheBrain · Accepted Answer · 2011-07-12 11:59:36Z

5

getElementsByClassName returns an array of elements so you need to iterate the find_class variable

var find_class = document.getElementsByClassName('group');
for (var i = 0, len = find_class.length; i < len; i++) {
   find_class[i].innerHTML = find_class[i].innerHTML + html_kode;
}

answered Jul 12, 2011 at 11:59

TheBrain

5,6202 gold badges27 silver badges26 bronze badges

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

Comments

Mārtiņš Briedis · Accepted Answer · 2011-07-12 12:00:44Z

0

Check out jQuery.

var myMessage = 'Mange tak';
var html_kode = '<input type="submit" onclick="clickedelm = this.value" id="qr_tak" tabindex="1" name="sbutton" title="(Alt + A)" accesskey="a" value="Auto Tak" class="button">';

$(".find_class").html(html_kode);

answered Jul 12, 2011 at 12:00

Mārtiņš Briedis

17.9k5 gold badges59 silver badges78 bronze badges

3 Comments

Patrick R Over a year ago

I cant use JQ since my final work is for the Greasemonkey plugin for firefox

Albireo Over a year ago

@Patrick R: If Briedis' answer does not answer your question, you shouldn't pick it as best answer... TheBrain's or patorjk's ones are much more relevant to what you're trying to do.

Patrick R Over a year ago

This did work, the problem was just that the text im trying to insert into a textarea, was in a iframe, so coundnt hit the textarea. And i also got JQuery to work with GM

patorjk · Accepted Answer · 2011-07-12 12:00:12Z

0

"getElementsByClassName" returns a set of elements, not a single element. Inside of your if statement, you'd really want to do something like this:

var len = find_class.length;
for (var ii = 0; ii < len; ii++) {
    find_class[ii].innerHTML = "new code";
}

answered Jul 12, 2011 at 12:00

patorjk

2,1821 gold badge21 silver badges30 bronze badges

Comments

Aleks G · Accepted Answer · 2011-07-12 12:03:01Z

0

Rather than search by class name, it's usually better to assign an ID to your element, then you can identify it uniquely by its ID:

<div id="mydiv">
...
</div>

and then you can just do

var mydiv = document.getElementById('mydiv');
mydiv.innerHTML = mydif.innerHTML + html_kode;

answered Jul 12, 2011 at 12:03

Aleks G

57.5k34 gold badges180 silver badges280 bronze badges

1 Comment

Patrick R Over a year ago

the class im looking for, thats inside a div, have no ID if that made sence ?

VoltairePunk · Accepted Answer · 2011-07-12 12:06:30Z

0

It might be a good idea to use a javascript library (i.e. jQuery).

It would make much more easier to fetch elements by class. Standard javascript hasn't got the ability to fetch something by class (only by id).

If you do decide to use jQuery:

if(myMessage)
{
  var find_class = $('.group');
  if(find_class.length > 0)
  {
    find_class.each(function(){
     $(this).html(html_kode);
    });
  }
}

Now if you do not want to use jQuery (Prototype, Dojo, etc.), you might want to search for and ID instead of a class - Just change group to an id and then use the getElementById

Hope this helps

answered Jul 12, 2011 at 12:06

VoltairePunk

3125 silver badges15 bronze badges

Comments

Spudley · Accepted Answer · 2011-07-12 12:07:21Z

0

getElementsByClassName is a relatively recent addition to the DOM, and some older browsers may not support it. IE8, I'm looking at you.

Most current browsers should be fine, but there's enough people using old versions of IE that you can't really use getElementsByClassName without implementing some kind of fall-back.

The most common fall-back solution is to use JQuery instead, but there are other solutions you can try which simply implement this function without the overhead of the rest of the JQuery library.

answered Jul 12, 2011 at 12:07

Spudley

169k39 gold badges240 silver badges309 bronze badges

Comments

Albireo · Accepted Answer · 2011-07-12 12:17:58Z

0

Since you said you're using it in a GreaseMonkey script:

Have you tried using XPath?

This is an example from a script of mine:

var XPath = function (path) {
    return document.evaluate(path, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0);
};

var yourOuterElement = XPath('/html/body/div[3]/form/table/tbody/tr/td/table');

var yourNewElement = document.createElement('input');

yourNewElement.setAttribute('type', 'submit');
yourNewElement.setAttribute('value', 'Send!');

yourOuterElement.appendChild(yourNewElement);

You can get the XPath for your yourOuterElement through FireBug.

answered Jul 12, 2011 at 12:17

Albireo

11.1k14 gold badges66 silver badges96 bronze badges

2 Comments

Patrick R Over a year ago

No i have not.. where can i read about xpath or find a tut on how to get mine to work ?

Albireo Over a year ago

@Patrick R: You can find some infos on GreaseMonkey's wiki, from there check the bottom links. It's very useful if the DOM of the page doesn't change and you don't have IDs.

Collectives™ on Stack Overflow

Get div class with javascript?

7 Answers 7

Comments

3 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

3 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related