Le positionnement des éléments HTML

Question

page HTML:

premier élément

La fonction onclick de premier élément (qui est < h1>) a la fonction suivante:

function insert(event) 
    { 
     elem = document.getElementById("first"); 
     element = document.createElement("div"); 
     element2 = document.createElement("a"); 
     element2.href = "www.google.com"; 
     element2.innerHTML = "GOOGLE" + n; 
     element.appendChild(element2); 
     //element.innerHTML = "text content"; 
     element.style.position = "relative"; 
     element.style.backgroundColor = "yellow"; 
     element.style.left = "10px"; 
     element.style.top = "30px"; 
     elem.appendChild(element); 
     //document.body.appendChild(element); 
     event.target.appendChild(element); 
     n++; 
    } 

sur en cliquant sur le « FIRST ELEMENT 'deux fois la sortie est:

FIRST ELEMENT 

GOOGLE1 

GOOGLE2 

mais je veux la sortie à être:

FIRST ELEMENT 

GOOGLE2 

GOOGLE1 

Comment puis-je y parvenir?

Answer 1

Vous pouvez utiliser insertBefore pour réorganiser l'ordre des éléments enfants. Voici ce que vous voulez:

var n = 1; 
function myfunc(event) 
{ 
    elem = document.getElementById("first"); 
    element = document.createElement("div"); 
    element2 = document.createElement("a"); 
    element2.href = "www.google.com"; 
    element2.innerHTML = "GOOGLE" + n; 
    element.appendChild(element2); 
    element.style.position = "relative"; 
    element.style.backgroundColor = "yellow"; 
    element.style.left = "10px"; 
    element.style.top = "30px"; 
    elem.appendChild(element); 

    children = elem.children;   

    if(typeof(children) != "undefined" && children.length > 1){ 

     num = children.length - 1; 
     elem.insertBefore(children[num], children[1]); 
    } 

    n++; 
}​ 

Lien vers l'échantillon de travail: http://jsfiddle.net/szNcT/