insertAfter no Javascript

Que o javascript é uma poderosa ferramenta, não há dúvidas, porém tem certas coisas no javascript que não entendo, Vejamos:

Imagine o windows explorer, quando você clica no botão (+) ele abre a raiz para ver as subpastas da raíz correto? Então, na página que eu estou montando o efeito é parecido, porém as "subpastas" estão numa div e tenho que construi-la dinâmicamente (por causa do acesso ao banco de dados), a qualquer momento as informações das subpastas podem mudar. No início do desenvolvimento, pensei logo em utilizar o appendChild.

document.getElementById("meuDiv").appendChild("DIV");

Porém ele só adiciona um elemento (no caso, uma div) no final de uma lista de elementos (no caso, ele seria o último elemento do div meuDiv) e isso não me servia, pois eu tinha que colocar o elemento imediatamente após a linha em que foi clicado o botão (+), como de costume lá vou eu no google procurar a solução, achando a função insertBefore (inserir antes).

document.getElementById("meuDiv").insertBefore("DIV", document.getElementById("linhadoMeuDiv[1]"));

Bom até aqui meio caminho andado, pois ele adiciona agora a div onde eu quero, porém ele adiciona o elemento antes da minha linha, ou seja, o meu efeito "windows explorer" funcionava de cabeça para baixo.

Eu falando para mim.
_ Se tem insertBefore, logicamente vai ter insertAfter e meu problema vai estar resolvido, já posso pular para outros problemas.

E adivinha só, não existe essa função, tive então que procurar por uma solução lendo um pouco sobre DOM, logo fiz isso:

document.getElementById("meuDiv").insertBefore("DIV", document.getElementById("linhadoMeuDiv[1]").nextSibling);

Agora sim problema resolvido, aquela propriedade nextSibling, vai para o próximo elemento. Ao invés de pegar o elemento linhadoMeuDiv[1], vai para linhadoMeuDiv[2], depois de pensar um pouco ainda havia um problema.

Vamos supor que o meu div tivesse 10 linhas e eu pressionasse o botão (+) da décima linha, como é que eu iria passar para o próximo elemento se não havia? Ou seja, no último elemento iria me retornar vazio.

Obs: Só essa linha funcionou no firefox, porém é uma maneira errada de funcionar e isso pode interferir de alguma forma no código.

Criei uma função para evitar esse erro. A lógica é bem simples, eu verifico se o botão que pressionei pertence à última linha, se pertencer eu uso o appendChild senão eu uso insertBefore, aqui vai o código:


function insertAfter (Pai, Irmao, elemento, index="" ) {
if (index != "") irmao = irmao+"["+index+"]";
if (document.getElementById(Pai).lastChild.id == document.getElementById(irmao).id) {
novoElemento = document.getElementById(Pai).appendChild(elemento);
} else {
novoElemento = div_plano.insertBefore("DIV", document.getElementById(irmao).nextSibling);
}
return novoElemento;
}

insertAfter("meuDiv", "linhaMeuDiv", "DIV", 1).setAttribute("id","DivSubLinha["+numero+"]");


função prontinha para você usar, só precisa passar os parâmetros:

• Nome do elemento pai.


• Nome do elemento da linha. (no meu caso, a linha em que foi clicado o botão)


• Nome do elemento que vai ser adicionado. (ex: div, input, select,...)


• o último parâmetro é opcional, pois no meu caso como eram várias linhas a única diferenciação entre elas era o número , pois todas tinham o mesmo nome, é claro. A minha separação foi feita por colchetes, ali fica à gosto do freguês, é só trocar da forma em que você está indexando.

Depois de criar o elemento, eu iria usá-lo, então tinha que saber o id para trabalhar com ele. Usei o setAttribute (setar atributo).

setAttribute("nomePropriedade", "valorPropriedade");

Essa função tem dois parâmetros o primeiro é o nome da propriedade do elemento (ex: id, name, value...) e o outro é o valor da propriedade.


Eu vi um tutorial muito bom sobre DOM e estou passando aqui o link, o problema é que está em inglês, mas vale a pena se esforçar um pouco para ler, isso se você não souber.

Espero que tenha sido útil e comentem please.

Fuiii...