CODEWITHSUNDEEP
javascript
Patrick R
Patrick R

Reputation: 1979

Get div class with javascript?

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

Upvotes: 1

Views: 7516

Answers (7)

Albireo
Albireo

Reputation: 11085

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.

Upvotes: 0

Spudley
Spudley

Reputation: 168655

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.

Upvotes: 0

VoltairePunk
VoltairePunk

Reputation: 302

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

Upvotes: 0

Aleks G
Aleks G

Reputation: 57306

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;

Upvotes: 0

Mārtiņš Briedis
Mārtiņš Briedis

Reputation: 17752

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

Upvotes: 0

patorjk
patorjk

Reputation: 2182

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

Upvotes: 0

TheBrain
TheBrain

Reputation: 5608

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

Upvotes: 5

Related Questions