Hvordan legge til HTML til en side med jQuery

July 25  by Eliza

jQuery kan brukes til å legge til HTML til en side. Du kan legge til alle slags HTML, bilder, omtrent alt, og fullstendig endre oppsettet på siden ved hjelp av jQuery. Gjør du det er ikke egentlig en god idé, fordi det kan bli veldig, veldig forvirrende å finne ut hva som kommer fra hvor og også kan være vanskeligere å opprettholde i fremtiden når du trenger å skifte side.

I alle tilfelle, legger HTML for ting som feilmeldinger eller for å legge data til en side er ganske vanlig. Tenk om en for reiser som ser opp informasjon om flyreisen. Du klikker på en knapp, og det bygger resultatene dynamisk, akkurat på samme side. Disse nettstedene bruker Javascript, mange ganger jQuery, for å oppnå dette feat.

Men før du går å endre HTML bør du lære hvordan du legger til HTML til en side.

Denne listen viser en enkel HTML-side som skaper en liste over elementer.

<! DOCTYPE html>
<Html>
<Head>
<Title> jQuery </ title>
</ Head>
<Body>
<H1> Legge HTML </ h1>
<Ul id = "thelist">
<Li> Her er en </ li>
<Li> Her er 2 </ li>
</ Ul>
</ Body>
</ Html>

En side vises i en nettleser ser ut som dette:

Hvordan legge til HTML til en side med jQuery

Den siden bruker et uordnet liste med to elementer. Du kan legge til et annet element til den listen med jQuery append () -funksjonen. Gjør du det betyr å velge <ul> element, som du allerede vet hvordan du skal gjøre, og deretter ringe append () -funksjonen. Her er et eksempel for å legge til et tredje element i listen:

$ ("# Thelist") føyer ("<li> Her er tre </ li>.");

Som du kan se, velger du <ul> element ved hjelp av et ID-velgeren og deretter ringe append () -funksjonen med HTML for å legge til. Ikke får mye enklere enn det.

Denne oppføringen viser endelige koden. Merk at jQuery er lagt til den i <head> -delen og append () -funksjonen er innenfor klar () -funksjonen.

<! DOCTYPE html>
<Html>
<Head>
<Title> jQuery </ title>
<Script type = "text / javascript"
src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js">
</ Script>
</ Head>
<Body>
<H1> Legge HTML </ h1>
<Ul id = "thelist">
<Li> Her er en </ li>
<Li> Her er 2 </ li>
</ Ul>
<Script type = "text / javascript">
$ (Document) .ready (function () {
$ ("# Thelist") føyer ("<li> Her er tre </ li>.");
});
</ Script>
</ Body>
</ Html>

Når de vises i en nettleser, ser resultatet slik ut:

Hvordan legge til HTML til en side med jQuery