Isättning av ett DIV till en annan DIV Dynamiskt

July 18

Isättning av ett DIV till en annan DIV Dynamiskt


Dynamiska webbplatser reagerar på användarens input och ändra innehållet på sidan. Flera skriptspråk kan uppnå denna effekt. Ett av de enklaste och mest populära att använda är JavaScript. Det gör att du kan ändra innehållet i elementen i HTML, såsom DIV (behållare av innehåll), baserat på en åtgärd, såsom att klicka eller svävar en mus. En musklick kan skapa en ny div inuti en befintlig, skapa innehåll relaterat till knappen klickas. Följ några steg för att uppnå denna effekt.

Instruktioner

1 Skapa en div mellan body-taggarna i din webbsida och ge div en ID "gamla div." Också skapa en knapp för användare att klicka som utlöser JavaScript-funktionen "newInnerDiv." Koden kommer att visas på följande sätt:

<Body>

<Div id = "oldDiv">

</ Div>

<Knapp type = "knapp" class = "knapp" onclick = "newInnerDiv ()"> Lägg till Div </ knappen>

</ Body>

2 Skapa funktionen "newInnerDiv" mellan huvudet taggar i dokumentet. Funktionen får befintliga div genom sitt ID "oldDiv" skapar en ny div element, skapar en ny p (punkt) elementet och skapar en textsträng av "Hej" för att placera inne p elementet. Det lägger den gamla div med den nya div-elementet, sätter ID för nya div till "newDiv" lägger den nya div med den nya p-elementet och lägger till nya p-elementet med det nya textsträngen av "Hej."

Lägg ett test i början av funktionen för att kontrollera om denna div redan skapades en gång genom att användaren klickar på knappen. Inget behov av att skapa flera divs. Ett enkelt test för detta exempel är att räkna hur många divs existerar. Om antalet divs närvarande på sidan är lika med 1, körs koden:

<Script type = "text / javascript">

fungera newInnerDiv () {

var checkDiv = document.getElementsByTagName ( "div");

var divNumber = (checkDiv.length);

if (divNumber == 1) {

var changeContent = document.getElementById ( "oldDiv");

var addDiv = document.createElement ( "div");

var newPara = document.createElement ( "p");

var newText = document.createTextNode ( "Hi");

changeContent.appendChild (addDiv);

addDiv.setAttribute ( "id", "newDiv");

addDiv.appendChild (newPara);

newPara.appendChild (newText);}

}

</ Script>

3 Lägg till några färger för både Divar mellan huvudet taggar så Divar är lätt att se när du testar funktionen. Gör gamla div röda och den nya div mindre och gult. Kasta i vissa stoppning för knappen och p element, om så önskas:

<Style type = "text / css">

oldDiv {width: 200px; höjd: 90px; gräns: tunn fast svart; padding: 0 5px 5px 5px; background-color: red; positioner: relativ; } NewDiv {background-color: gul; width: 180px; marginal: 10px; position: absolute; }

.button {margin: 20px 0 0 0; }

p {läge: relativ; float: left; padding: 10px; }

</ Style>

4 Spara sidan och öppna den i en webbläsare. En röd, tom öppnas. Klicka på knappen, och den nya div genereras, indikeras med sin gula färg och text av "Hej." Se "genererade källkoden," om det finns på webbläsaren, för att se den nya div och dess innehåll i den gamla div i HTML-kodning.

Den fullständiga koden visas på följande sätt:

<Html>

<Head>

<Style type = "text / css">

oldDiv {width: 200px; höjd: 90px; gräns: tunn fast svart; padding: 0 5px 5px 5px; background-color: red; positioner: relativ; } NewDiv {background-color: gul; width: 180px; marginal: 10px; position: absolute; }

.button {margin: 20px 0 0 0; }

p {läge: relativ; float: left; padding: 10px; }

</ Style>

<Script type = "text / javascript">

fungera newInnerDiv () {

var checkDiv = document.getElementsByTagName ( "div");

var divNumber = (checkDiv.length);

if (divNumber == 1) {

var changeContent = document.getElementById ( "oldDiv");

var addDiv = document.createElement ( "div");

var newPara = document.createElement ( "p");

var newText = document.createTextNode ( "Hi");

changeContent.appendChild (addDiv);

addDiv.setAttribute ( "id", "newDiv");

addDiv.appendChild (newPara);

newPara.appendChild (newText);}

}

</ Script>

</ Head>

<Body>

<Div id = "oldDiv">

</ Div>

<Knapp type = "knapp" class = "knapp" onclick = "newInnerDiv ()"> Lägg till Div </ knappen>

</ Body>

</ Html>


        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2022 Astrixsoft.com | Contact us: webmaster# astrixsoft.com