Używanie zmiennych js w atrybutach HTML

Question

Witam,
Zastanawiam się czy można używać zmiennych JS w atrybutach HTML.
Powiedzmy mam taką funkcję którą będę renderował HTML i chcę dopisać w html ID podane w funkcji

Coś takiego:

function dodajHTML(element, ID)
{
    $('element')append('<div id="divNr"+ID>');
}

Oczywiście to wyżej nie działa ale wyjaśnia o co mi chodzi.
Wiem, że mogę sobie to ustawić metodą .attr() ale chyba musiał bym to zrobić po wyrenderowaniu szablonu, a to rozwiązanie troszkę słabo mi się widzi.

Comments

Wyjmij ID ze stringa i zamknij diva.

Answer 1

Musisz użyć do tego konkatenacji, a nie przekazywać zmienna w stringu.

Druga opcja to Template literals, które przyszły wraz z ES6

Answer 2

<div>cos</div>

const element = document.querySelector('div');
function dodajHTML(element, ID) {
const newElement = document.createElement("div");
newElement.setAttribute("id", `divNr${ID}`);
element.appendChild(newElement);
}

dodajHTML(element, 'superID')

po co używac do tego jquery?

Comments

tak wiem, znam Twojego artka o angularze

Mogę prosić o linka, chętnie bym poczytał :)

---

@BetBet, proszę: https://www.webkrytyk.pl/2014/12/12/moja-prawda-o-angular-js/

Niemniej traktuj to jako ciekawostkę, bo minęło już mnóstwo czasu i nowy Angular to zupełnie inna bestia (ale wciąż przekombinowana :P).

---

Wykorzystując jeszcze troszkę ten wątek, zastanawiam się co wybrać przy kolejnym projekcie kiedy skończę bieżący. W jquery juz się czuję swobodnie, z opisów jakie napotkałem jedni mówią że vue ma beznadziejną dokumentację i część dalej jest po Chińsku drudzy, z kolei że najprzyjemniejszą, react korzysta z tego dziwnego JSX a angular używa typescript
Z tych wad najbardziej odstrasza chyba mnie react a typescript to nawet nwm czy się bać.

Tak więc albo w kolejnym projekcie będę używał czystego js albo któregoś z nich, co byście wybrali na moim miejscu?

---

TypeScript to nic wielkiego, do opanowania w jeden dzień, zresztą dokumentacja jest dość dobra. JSX to po prostu pewien rodzaj składni.

Generalnie jako programista wciąż uczysz się czegoś nowego więc od tego nie uciekniesz.

Ja pracowałem trochę z React/redux ale przyznam szczerze, że przyjemniej pracuje mi się obecnie w Angular przy dość dużej apce i pod bardzo dużym obciążeniem ruchem sprawdza się całkiem nieźle. Próg wejścia w Angular moim zdaniem jest bardzo niski, wystarczy w miarę dobra wiedza z JS i rozumienie asynchroniczności ale to akurat dzisiaj już podstawa nawet na juniora.

Angular wykorzystuje też rxjs co mi się bardzo podoba ale oczywiście nie jest to przymus, można spokojnie pozapinać sobie obsługę API na pomisach, co kto woli.

Co do VUE to się nie wypowiem bo nie znam tego frameworka.

---

TypeScript to nic wielkiego, do opanowania w jeden dzień

Może na poziomie składni – i to pod warunkiem, że dobrze znamy ES6+ i kiedyś przynajmniej widzieliśmy Javę z daleka. Na poziomie konwencji – tu już jest IMO trudniej, bo to właśnie obiektówka w stylu Javy, totalnie inna niż ta JS-owa.

Ja za to podrzucę jeszcze dwie, moim zdaniem, ciekawe ścieżki:

• Web Components – technologia ta zdobywa coraz większą popularność i uważa się, że może stać się tzw. compilation target dla rożnych frameworków;
• kompilatory – czyli "frameworki" wypluwające zoptymalizowany, czysty JS; tutaj przykładem może być Svelte.

Answer 3

Dobra, poradziłem sobie tak:
Ten sposób nie działał. 

function dodajHTML(element, ID){
    $(element).append('<div id=divNr${ID}></div>');
}

w powyższym przypadku id="divNr${ID}" - czyli nie używało zmiennej ID tylko to wszystko traktowało jako wartość atrybutu ID.
A działający sposób to:
 

function dodajHTML(element, ID){
    $(element).append('<div id=divNr' + ID + '></div>');
}

Praktycznie tak samo próbowałem na początku ale robiłem to tak:
 

function dodajHTML(element, ID){
    $(element).append('<div id="divNr" ' + ID + '></div>');
}

ale powyższy przykład zwracał tylko divNr i ID traktował jako deklarację atrybutu HTML, jeśli można tak to nazwać.

Comments

Teraz zerknąłem, że pierwszy przykład powinien być zamknięty w ` ` a nie w ' ' lub " " wiec też działa i jest o wiele lepszym zastosowaniem niż użycie ' '