Necesito encontrar / obtener una clase llamada "grupo" de una etiqueta div, con javascript. después de eso quiero insertar un botón html (input = submit) dentro de ese div que acabo de encontrar.

¿Cómo se puede hacer esto con JavaScript?

He intentado esto hasta ahora, pero se produce un error: ¡el documento no se declara!

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;
        }
    }
1
Patrick R 12 jul. 2011 a las 15:56

7 respuestas

La mejor respuesta

Consulte 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);
0
Mārtiņš Briedis 12 jul. 2011 a las 12:00

getElementsByClassName es una adición relativamente reciente al DOM, y algunos navegadores más antiguos pueden no ser compatibles. IE8, te estoy mirando.

La mayoría de los navegadores actuales deberían estar bien, pero hay suficientes personas que usan versiones antiguas de IE que realmente no puedes usar getElementsByClassName sin implementar algún tipo de respaldo.

La solución alternativa más común es usar JQuery en su lugar, pero hay otras soluciones puede probar y simplemente implementar esta función sin la sobrecarga del resto de la biblioteca JQuery.

0
Spudley 12 jul. 2011 a las 12:07

GetElementsByClassName devuelve una matriz de elementos, por lo que debe iterar la variable find_class

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;
}
5
TheBrain 12 jul. 2011 a las 11:59

Puede ser una buena idea usar una biblioteca javascript (es decir, jQuery).

Haría mucho más fácil recuperar elementos por clase. JavaScript estándar no tiene la capacidad de buscar algo por clase (solo por id).

Si decide usar jQuery:

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

Ahora, si no desea usar jQuery (Prototype, Dojo, etc.), es posible que desee buscar e ID en lugar de una clase. Simplemente cambie group a id y luego use getElementById

Espero que esto ayude

0
karmalis 12 jul. 2011 a las 12:06

En lugar de buscar por nombre de clase, generalmente es mejor asignar un ID a su elemento, luego puede identificarlo de manera única por su ID:

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

Y luego puedes hacer

var mydiv = document.getElementById('mydiv');
mydiv.innerHTML = mydif.innerHTML + html_kode;
0
Aleks G 12 jul. 2011 a las 12:03

"getElementsByClassName" devuelve un conjunto de elementos, no un solo elemento. Dentro de su declaración if, realmente querría hacer algo como esto:

var len = find_class.length;
for (var ii = 0; ii < len; ii++) {
    find_class[ii].innerHTML = "new code";
}
0
patorjk 12 jul. 2011 a las 12:00

Como dijiste que lo estás usando en un script de GreaseMonkey:

¿Has intentado usar XPath?

Este es un ejemplo de un script mío:

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

Puede obtener XPath para su yourOuterElement a través de FireBug.

0
Albireo 12 jul. 2011 a las 12:17