Na navigaci | Klávesové zkratky

Translate to English… Ins Deutsche übersetzen…

Vytváření elementů v jQuery

S pomocí jQuery lze vytvořit HTML element docela jednoduše:

var $el = $('<a href="https://phpfashion.com">blogísek</a>');

Do proměnné $el se přiřadí objekt jQuery obalující vytvořený HTML element (proto jsem použil dolar v názvu proměnné), k nativnímu DOM objektu se dostanete přes $el[0].

Co ale v případě, že potřebujeme jako hodnoty použít proměnné? Přímočaré řešení by vypadalo takto:

// špatně: riziko XSS
var url = 'https://phpfashion.com';
var title = 'blogísek';
var $el = $('<a href="' + url + '">' + title + '</a>');

Jenže, jak uvádí komentář v kódu, koledujeme si tímto o průšvih jménem Cross-site scripting (XSS). Stačí, aby například proměnná url obsahovala uvozovky a výsledek bude nezamýšlený. Proto je nutné proměnné escapovat, tj. nahradit znaky mající speciální význam za HTML entity. Na to si můžeme napsat funkci escapeHtml:

// správné, ale ne příliš přehledné
var escapeHtml = function(s) {
    return s.replace('&', '&amp;').replace('"', '&quot;')
        .replace("'", '&#039;').replace('<', '&lt;');
};

var $el = $('<a href="' + escapeHtml(url) + '">' + escapeHtml(title) + '</a>');

Skládání řetězců postrádá onu lehkost a srozumitelnost první ukázky, nemluvě o riziku, že escapeHtml zapomeneme zavolat. Naštěstí jQuery od verze 1.4 nabízí elegantní řešení: proměnné uvedeme ve druhém parametru (viz dokumentace)

// dokonalé
var $el = $('<a>', {
    href: url,
    text: title
});

Příjemné je, že takto lze kromě HTML atributů definovat i kaskádové styly a události:

// <a style="color: red;" onclick="..." href="https://phpfashion.com">blogísek</a>
var $el = $('<a>', {
    href: url,
    text: title,
    click: function(e) {
        alert(this.href);
    },
    css: {
        color: 'red'
    }
});

Dokonce dovnitř můžeme vložit další element:

// <a href="https://phpfashion.com"><img alt="Logo" src="images/logo.gif"></a>
var $el = $('<a>', {
    href: url,
    html: $('<img>', {
        src: 'images/logo.gif',
        alt: 'Logo'
    })
});

Fajnové, že?

p.s. pokud se chcete o jQuery dozvědět víc, přijďte na školení jQuery a AJAX.

Komentáře

  1. ady http://nasracky.cz/ #1

    avatar

    Tusim ze to lze jeste psat takto

    var el = $("<a>").attr("href", link).attr("title",title);

    Escapovani snad funguje taky.

    před 6 lety
  2. ady http://nasracky.cz/ #2

    avatar

    Sorry za ty uvozovky – zkousel jsem texy ale neumim, kdyz dam preview a neco je spatne tak uz pak muzu jen odeslat nejde mi dat znova preview ;/

    před 6 lety
  3. David Grudl http://davidgrudl.com #3

    avatar

    Možnosti attr() jsou omezenější, lze pomocí něj nastavit jen HTML atributy. Takže prvky css, text, html nebo click, jak jsou použity v článku, by bylo potřeba nastavit samostatným voláním stejnojmenných metod:

    var $el = $('<a>').attr('href', url).click(function() {
        alert(this.href);
    }).text(title).css('color', 'red');
    před 6 lety
  4. Daniel Steigerwald #4

    avatar

    Stejně je zajímavé, kolik let trvalo knihovně jQuery, než se nechala inspirovat od Mootools. Schválně, kdy implementují tohle:
    // selector string syntax
    new Element(„input#someID.someClass1.someClass2[disabled=true]“);

    před 6 lety | reagoval [5] Jakub [6] Pter Staníček
  5. Jakub #5

    #4 Danieli Steigerwalde,
    Neznám Mootools, ale co konkrétně je cílem toho kódu, co jste napsal?
    Děkuji

    před 6 lety
  6. Pter Staníček #6

    avatar

    #4 Danieli Steigerwalde, Já si tipnu, Dane: nikdy. To je totiž ten hlavní rozdíl mezi jQ a ostatními frameworky a taky hlavní příčina jeho úspěchu: oni kladou čitelnost a přehlednost kódu, standardizaci syntaxe a celkovou logiku nad efektivitu, stručnost i výkon kódu. Cokoli nového vymyslí, musí to především zapadat do celkového konceptu a dávat smysl. Musí to být postavené se stejnou logikou, jakou má zbytek frameworku — i když samo o sobě by se to dalo udělat stem lepších způsobů. A teprve až v dalších fázích to ladí na výkon. Takže si troufám tvrdit, že takovéhle prasárny se v jQuery nikdy neobjeví. Pokud náhodou ano, bude to pro mě známka začátku úpadku a první impuls k tomu, začít se ohlížet po jiném frameworku.

    Jinak tuhle syntaxi na vytváření obsahu jsem si oblíbil hodně rychle, používám to neustále a už bych to ani jinak dělat nechtěl.

    před 6 lety

Tento článek byl uzavřen. Už není možné k němu přidávat komentáře.