Aggiungere Div da un form

**Whitecrowsrain** · 07-06-2009, 02:32

Salve a tutti, sto realizzando uno script che alla pressione del tasto di un form aggiunga un div all'interno di un'altro div (nel codice sottostante id=div1):

codice:

function aggiungiDiv()
{
   divPrinc= document.getElementById("div1");
   var img = document.createElement("img");
   img.src="immagine.jpg";
   var divAgg= document.createElement("div"); 
   divAgg.appendChild(img);
   divPrinc.appendChild(divAgg);
}

Ora il problema è che mi Aggiunge il nuovo div all'interno del div1 ma non mi mette l'immagine che ho inserito dentro il nuovo div... dove sbaglio?

e se oltre all'immagine volessi inserire un link all'interno del div?

Grazie.

**Whitecrowsrain** · 07-06-2009, 10:20

provando così sembra che funzioni :

codice:

function aggiungiDiv()
    {
      divPrinc= document.getElementById("div1");
      var divAgg= document.createElement("div"); 
      var cont="<img src=\"prova.jpg\" width=\"80px\" height=\"80px\"> ";
      cont=cont+"
<a href=\"index.html\" title=\"index\">Index</a>";        
      divAgg.setAttribute("class","immagine");      
      divAgg.innerHTML=cont;
      divPrinc.appendChild(divAgg);
      alert('inserito');
    }

ma se io invece faccio così:

codice:

function aggiungiDiv()
{
   var divPrinc= document.getElementById("div1");
   var img = document.createElement("img");   
   var divAgg= document.createElement("div");
   var  link=document.creteElement("a");
  
   img.src="immagine.jpg";
   img.width="80";
   img.height="80";

   link.href="index.html";
   link.innerText="index";
   link.title="Prova";

   divAgg.appendChild(img);
   divAgg.appendChild(link);
   divPrinc.appendChild(divAgg);
}

mi inserisce solo l'immagine e non il link...
e poi non ho capito la differenza tra :

codice:

   img.href="index.html";

e

codice:

   img.setAttribute("href","index.html"=;

Grazie

P.S.
Come si può notare sono nuovo per quanto riguarda il javascript anche se alle volte ho utilizzato script esistenti e li ho anche personalizzati ma non avevo mai prima d'ora approfondito la sua conoscienza!

ovviamente il codice HTML è questo :

codice:

<html>
  <head>
    <title>Prova div</title>
    <style>
     .immagine
     {
        padding:5px;
        border: 1px solid;
        width: 90px;
      }
      .immagine a
      {
        color:red;
       
      } 
     
    </style>
  </head>
  <body>
    <form>
      <input type="button" value="aggiungi" nome="aggiungi" onclick="aggiungiDiv();" >      
    </form> 
    <div id="div1">
    </div>
  </body>
</html>

**Xinod** · 07-06-2009, 14:28

provi con firefox?
innerText non esiste, e' IE proprietario
usa document.createTextNode('testo link') e appendilo al link come fosse un elemento

poi, ovvio errore di trascrizione, hai scritto creteElement("a")

settare esplicitamente un attributo o settarlo via setAttribute produce, in generale, identici risultati

un esempio di caso in cui non sarebbe identico?
- value di un campo testo in cui hai gia' scritto
setAttribute va a cambiare il value scritto nel markup (se lo ispezioni con firebug avra' il nuovo value) ma se ne chiedi il value sara' sempre quello che vi hai scritto manualmente,
se lo chiedi via getAttribute avrai quanto settato via setAttribute (= quanto presente nel markup)

ciao

**Whitecrowsrain** · 07-06-2009, 19:14

Ok ora funziona in tutti e due modi:

Versione 1

codice:

function aggiungiDiv()
{
   var divPrinc= document.getElementById("div1");
   var img = document.createElement("img");   
   var divAgg= document.createElement("div");
   var  link=document.createElement("a");
   var  br=document.createElement("br");
   var  Tlink=document.createTextNode("Html");
  
   img.src="prova.jpg";
   img.width="80";
   img.height="80";

   link.href="index.html";
   link.title="Prova";
   link.appendChild(Tlink);

   divAgg.setAttribute("class","immagine");
   divAgg.appendChild(img);
   divAgg.appendChild(br);
   divAgg.appendChild(link);
   divPrinc.appendChild(divAgg);
}

Versione 2

codice:

function aggiungiDiv()
    {
      divPrinc= document.getElementById("div1");
      var divAgg= document.createElement("div"); 
      var cont="<img src=\"prova.jpg\" width=\"80px\" height=\"80px\"> ";
      cont=cont+"
<a href=\"index.html\" title=\"prova\">Index</a>";        
      divAgg.setAttribute("class","immagine");      
      divAgg.innerHTML=cont;
      divPrinc.appendChild(divAgg);
      alert('inserito');
    }

Quale mi consigliate di usare e perché?

Discussione: Aggiungere Div da un form

Strumenti discussione

Ricerca discussione

Visualizza

Aggiungere Div da un form

Permessi di invio