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;
        }
    }

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

• JavaScript plaining about document not defined hints for something very wrong with your code. That code is placed in a real HTML page? Doctype pliant? – 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 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 Commented Jul 12, 2011 at 12:18

7 Answers 7

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;
}

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);

"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";
}

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;

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

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 mon 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.

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.