Ajouter une ligne à une table en Javascript qui contient les classes d'entrée

Question

Im essayant faire essentiellement:

var tr = document.createElement("tr"); 
    var td = document.createElement("td"); 
    td.appendChild(document.createTextNode('<input class="param" type="text" name="dummy" value="fred"/>')); 
    tr.appendChild(td); 

mais il ne fait qu'afficher l'entrée ... comme du texte normal, comment puis-je insérer pour que cela fonctionne comme je l'exige ..?

je devine c'est le createTextNode qui doit être changé?

À votre santé

Answer 1

Vous pouvez soit

td.innerHTML = '<input class="param" type="text" name="dummy" value="fred"/>'; 

ou

var ip = document.createElement('input'); 
ip.className = 'param'; 
ip.type = 'text'; 
ip.name = 'dummy'; 
ip.value = 'fred'; 

td.appendChild(ip); 

EDIT

-à-dire ne permettra pas le type d'un élément de formulaire à modifier dynamiquement. Je suis sûr que cela ne s'applique que lorsque l'élément a déjà un type et a déjà été inséré dans le DOM. Le mieux est de vérifier. Si cela ne fonctionne pas, utilisez la méthode 1

Answer 2

Essayez d'utiliser la propriété innerHtml de l'élément.

C'est essayer d'utiliser td.innerHtml = "<input ...../>"

Answer 3

Meouw a la bonne idée. Vous créez un noeud de texte dans votre exemple, et ce qui doit être fait est de créer un élément dom.

C'est aussi un autre cas où jQuery pourrait simplifier votre code. Ce que vous tentiez de faire en ajoutant l'élément comme une chaîne HTML peut être fait avec la fonction html (val) jQuery:

http://docs.jquery.com/Attributes/html#val

En fait, d'appliquer cette technique avec votre exemple donné, vous devez inclure la bibliothèque jQuery sur votre page et écrire la ligne suivante:

$("#someTable").html('<tr><td><input class="param" type="text" name="dummy" value="fred"/></td></tr>'); 

Vous pouvez également créer un élément HTML à la volée et chaîne les attributs et les gestionnaires d'événements dans une ligne comme dans l'exemple suivant:

http://www.peterbe.com/plog/creating-dom-element-with-jquery

var textbox = $("<input type='text'></input>").attr('name','dummy').addClass('param').val('fred'); 
$("#someTableCell").append(textbox);