Søg
Avatar billede mikmakmuk Nybegynder
11. december 2007 - 10:45 Der er 29 kommentarer og
1 løsning

Smart måde at flytte indhold fra et div til et andet

Hej Eksperter,

Er der en som har en god idé til hvordan jeg flytter noget indhold fra et div til et andet.
Avatar billede softspot Forsker
11. december 2007 - 10:48 #1
En hurtig men ikke særlig kompatibel metode er at aflæse innerHTML fra det du vil flytte fra og sætte innerHTML i det du vil flytte til:

document.getElementById("divtil").innerHTML = document.getElementById("divfra").innerHTML;
Avatar billede olebole Juniormester
11. december 2007 - 11:13 #2
<ole>

Du kan også bruge DOM (f.eks. ELEMENT.cloneNode og ELEMENT.appendChild), men den nøjagtige fremgangsmåde afhænger af din markup-kode

/mvh
</bole>
Avatar billede mikmakmuk Nybegynder
11. december 2007 - 14:05 #3
Hmmmm. Jeg tror jeg har en lidt bedre idé. Hvad nu hvis jeg gerne vil tilføje et id til en liste som jeg så køber igennem. Sådan at jeg har en funktion som sætter dem og en som skriver dem ud.
Avatar billede mikmakmuk Nybegynder
11. december 2007 - 14:42 #4
Kan jeg ikke gøre noget i den her retning

var mylist=new Array();

function addToListe(id)
{
    var n = mylist.length+1;
    mylist[n]=id;
   
}
Avatar billede mikmakmuk Nybegynder
11. december 2007 - 14:43 #5
og så proppe værdierne ind sådan her

<a href="#" onclick="addToListe('ladida');">ladida</a>
<a href="#" onclick="addToListe('hutlihut');">hutlihut</a>
Avatar billede mikmakmuk Nybegynder
11. december 2007 - 14:45 #6
Det jeg gerne vil ende med er en liste jeg så kan skrive ud og som bliver opdateret hver gang man tilføjer et element
Avatar billede mikmakmuk Nybegynder
11. december 2007 - 14:47 #7
Jeg forestillede mig at have en anden funktion som løber arrayet i gennem ala.

function udskriv()
{
    var i=0;
    for (i=0;i<=mylist.length;i++)
    {
        document.write(mylist[i]);
    }
}
Avatar billede mikmakmuk Nybegynder
11. december 2007 - 14:48 #8
er det helt i skoven :-(
Avatar billede w13 Novice
11. december 2007 - 18:34 #9
Hvorfor ikke bare document.getElementById('element').cloneNode? :) Det er da langt lettest.
Avatar billede mikmakmuk Nybegynder
12. december 2007 - 06:21 #10
fordi jeg reelt har brug for en liste over de ting der er klikket på som jeg så kan udskrive og danne min liste. Ved godt spørgsmålet har ændret noget karakter.
Avatar billede softspot Forsker
12. december 2007 - 08:59 #11
Umiddelbart er din idé med at gemme det du klikker på i et array fin nok, men du kan ikke skrive værdierne tilbage til samme dokument med document.write efter det er lukket (det vil vist sige onload er kørt). Derfor er du nød til at tilføje dem til dokumentet med DOM, f.eks. med metoden appendChild. Hvis du har et element hvori du kan tilføje de klikkede elementer f.eks.:

<div id="klikkede">
</div>

kan du gøre noget i stil med dette:

function udskriv() {
  var e = document.getElementById("klikkede");
  for (i=0;i<=mylist.length;i++) {
    e.appendChild(document.createTextNode(mylist[i]));
    e.appendChild(document.createElement("br"));
  }
}

Det er ikke testet, men i princippet burde det fungere...
Avatar billede mikmakmuk Nybegynder
12. december 2007 - 09:19 #12
Hmmmmmmm. Det kan jeg ikke umiddelbart få til at spille. Er det ikke meningen at elementerne skal blive skrevet ud når jeg kalder udskriv
Avatar billede mikmakmuk Nybegynder
12. december 2007 - 09:19 #13
altså de ting som ligger i arrayet
Avatar billede olebole Juniormester
12. december 2007 - 09:30 #14
Prøv at vise, hvordan din markup kode ser ud
Avatar billede crazysnap Seniormester
12. december 2007 - 09:54 #15
Hej mikmakmuk,

I al frustation over at dette spørgsmål ikke er lukket endnu har jeg samlet alle script-stumperne og lavet et lille eksempel til dig. Når der klikkes på et af links'ne tilføjes der tekst til arrayet. Når knappen "Udskriv array" klikkes, skrives array-indholdet ud i <div id="klikkede" /> tag'en. Du kan nulstille array'et ved at klikke på "Clear array"-knappen.



<html xmlns="http://www.w3.org/TR/html401">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <script type="text/JavaScript">
            var mylist=new Array();
           
            function clearArray()
            {
              mylist = new Array();
            }
           
            function addToList(id)
            {
                mylist.push(id); 
            }
           
            function udskriv()
            {
                var e = document.getElementById("klikkede");
               
                //Slet eventuelt eksisterende indhold af 'klikkede' div tag'en.
                clearNode(e);
               
                for (i=0; i < mylist.length; i++)
                {
                    e.appendChild(document.createTextNode(mylist[i]));
                    e.appendChild(document.createElement("br"));
                }
            }
           
            function clearNode(node)
            {
                while(node.childNodes.length > 0)
                  node.removeChild(node.childNodes[0]);
            }

        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <a href="#" onclick="addToList('ladida');">ladida</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#" onclick="addToList('hutlihut');">hutlihut</a>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Udskriv array" id="btnOut" onclick="udskriv();" />
                    <input type="button" value="Clear array" id="btnClear" onclick="clearArray();" />
                </td>
            </tr>
            <tr>
                <td style="padding-top: 10px;">
                    Her kommer indholdet af arrayet:
                    <div id="klikkede"></div>
                </td>
            </tr>
        </table>
    </body>
</html>


Håber dette eksempel afspejler hvad du søger. :)

Mvh.
CS
Avatar billede mikmakmuk Nybegynder
12. december 2007 - 12:38 #16
Mange tak. Det ser umiddelbart fornuftigt ud. Tester det lige af og vender tilbage
Avatar billede mikmakmuk Nybegynder
12. december 2007 - 13:04 #17
kan jeg ikke gøre sådan her

e.appendChild(document.createElement("<img src='MINURL"));
e.appendChild(document.createTextNode(mylist[i]));
e.appendChild(document.createElement("' />"));
Avatar billede crazysnap Seniormester
12. december 2007 - 13:30 #18
Det kan man/du sagtens jo, dog ikke helt som du gør der, men næsten. Du kan se for-løkken nedenfor med et billede tilføjet med fil-navn svarende til den tekst man gemmer i array'et. Jeg har desuden ladet koden fra tidligere være, så du nemt kan se tilføjelserne:

for (i=0; i < mylist.length; i++)
{
    var imgPath = "C:\\Test\\" + mylist[i];
    var imgNew = document.createElement("img");
    imgNew.setAttribute("src", imgPath);
   
    e.appendChild(imgNew);
    e.appendChild(document.createTextNode(mylist[i]));
    e.appendChild(document.createElement("br"));
}

Så her svarer imgPath til din MINURL + mylist[i]. Det antages derfor at billed-navnene i array'et ligger i "C:\Test"-mappen på din computer.


Mvh.
CS
Avatar billede mikmakmuk Nybegynder
12. december 2007 - 15:44 #19
Det hele ser faktisk ret fornuftigt ud efterhånden.

function addToList(id)
            {
                mylist.push(id);
                udskriv(); 
            }

Kan man lave et eller andet fikst som gør at der kommer fokus på  <div id="klikkede"></div> når man tilføjer et element
Avatar billede crazysnap Seniormester
12. december 2007 - 16:15 #20
Nu ved jeg ikke helt hvad du mener med fokus? Der er jo ikke nogen textbox at sætte fokus på, så du må næsten mene noget "fokus" som gør brugeren opmærksom på at noget er tilføjet. Dette kunne f.eks. være en blinkende kant omkring de tilføjede elementer.
Prøv at se eksemplet nedenfor med blinkende kant. Er det ikke det du mener med fokus, må du lige uddybe yderligere.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/TR/html401">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <script type="text/JavaScript">
            var mylist=new Array();
            var intFlash = 3;
            var tmpFlash;
       
            function clearArray()
            {
              mylist = new Array();
            }
           
            function addToList(id)
            {
                mylist.push(id); 
                udskriv();
            }
           
            function flash(id)
            {
                var elm = document.getElementById(id);
               
                var clr =  (tmpFlash % 2) ? "Red" : "Black";
               
                if(tmpFlash > 0)
                    elm.style.border = "solid 1px " + clr;
                else
                {
                    elm.style.border = "";
                    return;
                }
               
                tmpFlash--;
               
                setTimeout("flash('" + id + "')", 300);               
            }
           
            function udskriv()
            {
                var e = document.getElementById("klikkede");
               
                //Slet eventuelt eksisterende indhold af 'klikkede' div tag'en.
                clearNode(e);
               
                for (i=0; i < mylist.length; i++)
                {
                    var imgPath = "C:\\Test\\" + mylist[i];
                    var imgNew = document.createElement("img");
                    imgNew.setAttribute("src", imgPath);
                   
                    e.appendChild(imgNew);
                    e.appendChild(document.createTextNode(mylist[i]));
                    e.appendChild(document.createElement("br"));
                }
               
                tmpFlash = intFlash;
                flash(e.id);
            }
           
            function clearNode(node)
            {
                while(node.childNodes.length > 0)
                  node.removeChild(node.childNodes[0]);
            }

        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <a href="#" onclick="addToList('dot_1.gif');">ladida</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#" onclick="addToList('dot_2.gif');">hutlihut</a>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Udskriv array" id="btnOut" onclick="udskriv();" />
                    <input type="button" value="Clear array" id="btnClear" onclick="clearArray();" />
                </td>
            </tr>
            <tr>
                <td style="padding-top: 10px;">
                    Her kommer indholdet af arrayet:
                    <div id="klikkede"></div>
                </td>
            </tr>
        </table>
    </body>
</html>


Mvh.
CS
Avatar billede mikmakmuk Nybegynder
12. december 2007 - 16:49 #21
Det jeg egentlig mente var om man opnå en effekt som gør at man scroller til listen når man tilføjer et nyt element :-)
Avatar billede crazysnap Seniormester
12. december 2007 - 18:28 #22
Javel, det her eksempel scroller ned til div-tag'en når der klikkes på en af links'ne:


<html xmlns="http://www.w3.org/TR/html401">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <script type="text/JavaScript">
            var mylist=new Array();
       
            function clearArray()
            {
              mylist = new Array();
            }
           
            function addToList(id)
            {
                mylist.push(id); 
                udskriv();
               
                return false;
            }
           
            function scrollToElement(elm)
            {
                  var intPosX = 0;
                  var intPosY = 0;
                  var element = elm;           
                  while(elm != null)
                  {
                    intPosX += elm.offsetLeft;
                    intPosY += elm.offsetTop;
                    elm = elm.offsetParent;
                  }
                                                     
                window.scrollTo(intPosX,intPosY);
                element.focus();
            }

           
            function udskriv()
            {
                var e = document.getElementById("klikkede");
               
                //Slet eventuelt eksisterende indhold af 'klikkede' div tag'en.
                clearNode(e);
               
                for (i=0; i < mylist.length; i++)
                {
                    var imgPath = "C:\\Test\\" + mylist[i];
                    var imgNew = document.createElement("img");
                    imgNew.setAttribute("src", imgPath);
                   
                    e.appendChild(imgNew);
                    e.appendChild(document.createTextNode(mylist[i]));
                    e.appendChild(document.createElement("br"));
                }
               
                scrollToElement(e);
            }
           
            function clearNode(node)
            {
                while(node.childNodes.length > 0)
                  node.removeChild(node.childNodes[0]);
            }

        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <a href="#" onclick="return addToList('dot_1.gif');">ladida</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#" onclick="return addToList('dot_2.gif');">hutlihut</a>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Udskriv array" id="btnOut" onclick="udskriv();" />
                    <input type="button" value="Clear array" id="btnClear" onclick="clearArray();" />
                </td>
            </tr>
            <tr>
                <td style="padding-top: 1000px;">
                    Her kommer indholdet af arrayet:
                    <div id="klikkede"></div>
                </td>
            </tr>
        </table>
    </body>
</html>


Er vi ved at være der nu?


Mvh.
CS
Avatar billede mikmakmuk Nybegynder
13. december 2007 - 06:52 #23
Det er top nice. Tak for hjælpen
Avatar billede mikmakmuk Nybegynder
13. december 2007 - 08:26 #24
Der er dog en del mere jeg skal have til at spille, f.x hvordan jeg sætter height og width på img elementet, eller tilknytter en css class, eller hvordan jeg putter divs inden i divs, men det er vist bedst at jeg selv roder lidt videre med det.

Læg endeligt et svar
Avatar billede mikmakmuk Nybegynder
13. december 2007 - 09:42 #25
Jeg kan bare ikke få det til at virke i den sammenhæng jeg skal have det til at virke :-(
Avatar billede mikmakmuk Nybegynder
13. december 2007 - 15:25 #26
Hmmm det lykkes at få fokus tingen til at spille. Der manglede et div
Avatar billede crazysnap Seniormester
13. december 2007 - 16:48 #27
Hej mikmakmuk,

hvad de andre attributter angår (width, height, class) bruger du bare setAttribute på imgNew-elementet i 'udskriv()'-metoden. Men glad for at høre du har fået det til at virke. :)

Jeg lægger et svar, og du må endelig skrive hvis der opstår andre problemer.

Mvh.
CS
Avatar billede mikmakmuk Nybegynder
13. december 2007 - 18:51 #28
Som sagt skal du have tusinde tak for hjælpen. Jeg har oprettet et andet spørgsmål fordi jeg ikke forstår hvordan jeg putter tingene ind i hinanden. Det ville være cool hvis du gad kigge på det. Anyway her er dine velfortjente points
Avatar billede olebole Juniormester
14. december 2007 - 13:10 #29
Vær lige opmærksom på, du ikke kan bruge DOM (set-/getAttribute) til class-attributten, hvis det skal virke crossbrowser. IE kræver 'className' - mens FF og andre kræver 'class' - som navnet på attributten. Brug i stedet IDL til class-attributten:
    ELEMENT.className = "enKlasse";

- på samme måde som det også er nødvendigt ved dynamiske attributter (f.eks. 'value' og 'checked' på formfelter)
Avatar billede w13 Novice
14. december 2007 - 17:24 #30
Olebole>> IDL?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 I dag 13:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 00:59 Mobilepay app virker ikke mere på Xiaomi Redmi Note 13 Pro Af henrixx i Apps til Android
I går 19:09 Download Win 11 - 25H2 Af ErikHg i Windows
30/0410:42 Access Import af csv fil - forkerte datatyper Af Henrik Berg Hansen i Andet software
29/0419:37 Hente CSV fil, indsætte CSV data i TABEL for JAVASCRIPT Af snestrup2000 i Programmeringsværktøjer
29/0412:23 Facebook Af hkv i Sociale medier
White papers
Flere white papers »