Hoe kan ik HTML toevoegen aan een pagina met jQuery

jQuery kan worden gebruikt om HTML aan een pagina. Je kunt allerlei HTML, afbeeldingen toe te voegen, zo ongeveer alles, en de lay-out van de pagina met behulp van jQuery volledig veranderen. Wel doet, is niet echt een goed idee, want het kan echt, echt verwarrend om erachter te komen wat er gaat komen van waar en kan ook moeilijker in de toekomst te behouden wanneer u het nodig om de pagina te wijzigen.

In ieder geval, het toevoegen van HTML voor dingen zoals foutmeldingen of om gegevens naar een pagina toe te voegen is heel gewoon. Denk na over een reis-site die opkijkt vluchtinformatie. U klikt op een knop, en het bouwt de resultaten dynamisch, recht op dezelfde pagina. Deze sites gebruiken JavaScript, vele malen jQuery, om deze prestatie te bereiken.

Maar voordat je gaat veranderen HTML je moet leren hoe je HTML aan een pagina toevoegen.

Deze lijst toont een eenvoudige HTML-pagina die een lijst met items creƫert.

<! Doctype html>
<Html>
<Head>
<Title> jQuery </ title>
</ Head>
<Body>
<H1> Het toevoegen van HTML </ h1>
<Ul id = "theList">
<Li> Hier is 1 </ li>
<Li> Hier is 2 </ li>
</ Ul>
</ Body>
</ Html>

Een pagina bekeken in een webbrowser ziet er als deze:

Hoe kan ik HTML toevoegen aan een pagina met jQuery

De pagina maakt gebruik van een ongeordende lijst met twee punten. U kunt een ander item toevoegen aan de lijst met de jQuery append () functie. Dit zou tot gevolg selecteren van de <ul> element, dat je al weet hoe dat te doen, en dan roepen de append () functie. Hier is een voorbeeld van een derde punt toe te voegen aan de lijst:

$ ("# TheList") append ("<li> Hier is 3 </ li>.");

Zoals u kunt zien, de <ul> element selecteert u met behulp van een ID-selector en dan bellen met de append () functie met de HTML toe te voegen. Kan niet veel eenvoudiger dan dat.

Deze lijst toont de uiteindelijke code. Merk op dat jQuery is toegevoegd aan het in de <head> sectie en de append () functie is binnen het klaar is () functie.

<! 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> Het toevoegen van HTML </ h1>
<Ul id = "theList">
<Li> Hier is 1 </ li>
<Li> Hier is 2 </ li>
</ Ul>
<Script type = "text / javascript">
$ (Document) .ready (function () {
$ ("# TheList") append ("<li> Hier is 3 </ li>.");
});
</ Script>
</ Body>
</ Html>

Wanneer bekeken in een browser, het resultaat ziet er als volgt uit:

Hoe kan ik HTML toevoegen aan een pagina met jQuery