Criar HTML dinamicamente

Pergunta
O que gostaria de conseguir é que ao clicar sobre o link "More" aparecesse um novo campo tipo file, com um identificador novo, etc etc, da mesma forma que se escrevesse no código.

Penso na opção de ter, por exemplo, 5 Inputs file ocultos e ao clicar em "More" que mostre essas camadas, porém não é isso o que de verdade quero fazer. O que quero é que ao clicar em "More" se adicione o HTML resultante a acrescentar um campo mais.

Tratar os múltiplos input file depois é a seguinte tarefa NAO trivial.

Alguém pode me ajudar?
Espero que tenha ficado clara a pergunta. Resumindo estou tratando de implementar um sistema que permita fazer um upload de múltiplos arquivos.

Valorize esta FAQ:
A FAQ Criar HTML dinamicamente tem Pertence à categoria:
Resposta
Claro...

Suponhamos que tem uma tabela com o input que traz por padrão verdade.

<table id="tabelaFiles"><tr><td><input type="file" id="xxx0"></td></tr></table>


Você tem uma variável em javascript

var contador = 0;

E para agregar mais campos então, lhe diz que chame uma função para que crie o input

function criar() {
var tabla = document.getElementById('tabelaFiles');
var tr = tabela.insertRow();
var td = tr.insertCell();

contador++;
var new_file = document.createElement('input');
new_file.type = 'file'
new_file.id = 'xxx'+contador
td.appendChild(new_file);
}



Porém assim funciona em Explorer, em FireFox é parecido, mas não utilize os métodos insertRow() nem insertCell(), e sim que deve utilizar o createElement() segundo o caso tr ou td e agregá-los com o appendChild.

Por Vega Eudy

Voltar à árvore de categorias Voltar à árvore de categorias

 
FAQs relacionadas
  + Links para downloads de arquivos
  + Mudar tipografia para toda a página
  + Desenho com frames. Vantagens e inconvenientes.
  + Mostrar um endereço simples na barra de endereços
  + Como inserir um contador de visitas
  + Por que aconselham aprender HTML?
  + Colocar links em HTML de uma cor determinada
  + Esconder o endereço da página em uma janela
  + Links que carreguem uma nova janela
  + Conteúdo dos META
  + [...]

Ver todas las FAQS de HTML

Usuários :    login / registro

Home | Sobre nós | Copyright | Anuncie | Entrar em contato