Dynamiczne tworzenie elementów HTML za pomocą JavaScript?
Chcę dynamicznie utworzyć niektóre elementy HTML (3 elementy html), a następnie zwrócić ten kod HTML jako ciąg w zmiennej. Nie chcę pisać kodu HTML w następującej funkcji w jakimś div, ale chcę go zwrócić w var.
function createMyElements(id1,id2,id3){//create anchor with id1
//create div with id 2
//create xyz with id3//now return the html code of above created just now}
W jaki sposób mogę to zrobić?
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
4 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
Jeśli chcesz tylko HTML, to jest to podejście:
Innym podejściem jest utworzenie elementu div bez wstawiania go do drzewa DOM i dodawanie do niego elementów przy użyciu metod DOM. Oto funkcja tworzenia 1 elementu
Anonimowy użytkownik
Potwierdzenie od:
JavaScript:
Głównym powodem używania documentFragment zamiast bezpośredniego dodawania elementów jest szybkość.
Przy tej wielkości to nie ma znaczenia, ale kiedy zaczniesz dodawać setki elementów, z przyjemnością zrobisz to najpierw w pamięci :-)
Dzięki documentFragment możesz zbudować w pamięci całe drzewo elementów DOM i nie wpłynie to na DOM przeglądarki aż do ostatniej chwili.
W przeciwnym razie zmusza przeglądarkę do odświeżenia każdego elementu, co czasami może być naprawdę uciążliwe.
Anonimowy użytkownik
Potwierdzenie od:
następnie zwracasz zmienną html
Anonimowy użytkownik
Potwierdzenie od:
Załóżmy, że masz stronę html pod nazwą „index.html” (wywołując tutaj index_static.html).
Możesz otworzyć ten plik w przeglądarce, aby zobaczyć żądany wynik.
Teraz stwórzmy dla tego odpowiednik javascript.
Posługiwać się
online-tool
http://www.accessify.com/tools ... rtor/
aby wygenerować źródło javascript (wklejając do niego wspomniane źródło pliku html). Z tego wynika, że:
Teraz Twoja dynamiczna wersja static_index.html będzie wyglądać tak, jak pokazano poniżej:
Otwórz plik index_dynamic.html w przeglądarce, aby sprawdzić stronę internetową (aczkolwiek dynamiczną, w dół).
Dodatkowe informacje
https://www.codeproject.com/Ar ... nners