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ć?
2021-03-02 Dodaj komentarz
Udostępnij to

Nie znaleziono powiązanych wyników

    Zaproszony:
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Możesz utworzyć element za pomocą
    document.createElement
    . Po utworzeniu możesz dodawać atrybuty. Jeśli chcesz, aby element pojawił się w dokumencie, musisz wstawić go do drzewa DOM dokumentu. Spróbuj pobawić się tym kodem: 
    var body = document.getElementsByTagName('body')[0],
    
 newdiv = document.createElement('div');//create a div
    
 newdiv.id = 'newid';//add an id
    
 body.appendChild(newdiv);//append to the doc.body
    
 body.insertBefore(newdiv,body.firstChild)//OR insert it

    Jeśli chcesz tylko HTML, to jest to podejście: 
    function createmyElements(id1,id2,id3){
    
 return [
    
 '[url="some link" id="',
    
 id1,
    
 '">linktxt[/url]',
    
 '<div id="" ',
    
 id2,
    
 '">',
    
 '<someElement id="',
    
 id3,
    
 '"></someElement>'
    
 ].join('\n');
    
}

    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 
    function createElementHtml(id,tagname){
    
 var containerdiv = document.createElement('div'),
    
 nwtag = document.createElement(tagname);
    
 nwtag.id = id;
    
 containerdiv.appendChild(nwtag);
    
 return containerdiv.innerHTML;
    
}
    
//usage
    
createElementHtml('id1','div');//=> <div id="id1">
    2021-03-02 0 0
    Udostępnij to
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Html:
    <div id="main">

    JavaScript:
    var tree = document.createDocumentFragment();
    
var link = document.createElement("a");
    
link.setAttribute("id", "id1");
    
link.setAttribute("href", "[url=http://site.com"]http://site.com"[/url];);
    
link.appendChild(document.createTextNode("linkText"));var div = document.createElement("div");
    
div.setAttribute("id", "id2");
    
div.appendChild(document.createTextNode("divText"));tree.appendChild(link);
    
tree.appendChild(div);
    
document.getElementById("main").appendChild(tree);

    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.
    2021-03-02 0 0
    Udostępnij to
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Możesz zbudować html jako ciąg znaków w jednej zmiennej, takiej jak 
    var html = "";
    
html += "<a id='" + id1 +"'>link[/url]";
    
html += "<div id='" + id1 +"'>div";
    
// ... and so on

    następnie zwracasz zmienną html 
    return html;
    2021-03-02 0 0
    Udostępnij to
    Anonimowy użytkownik

    Anonimowy użytkownik

    Potwierdzenie od:

    Oto prosta ilustracja konwersji stronicowanej HTML (statyczna) na stronicowaną JavaScript (dynamiczna).
    Załóżmy, że masz stronę html pod nazwą „index.html” (wywołując tutaj index_static.html). 
    index_static.html
    <!DOCTYPE HTML>
    
<html>
    
 <head>
    
 <title>Test</title>
    
 </head>
    
 <body>
    
 [b] Hello !!! [/b]>
    
 </body>
    
</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: 
    dynamic.js
    document.write("<!DOCTYPE HTML>");
    
document.write("<html>");
    
document.write(" <head>");
    
document.write(" <title>Test<\/title>");
    
document.write(" <\/head>");
    
document.write(" <body>");
    
document.write(" [b] Hello !!! <\/h1>");
    
document.write(" <\/body>");
    
document.write("<\/html>");

    Teraz Twoja dynamiczna wersja static_index.html będzie wyglądać tak, jak pokazano poniżej: 
    index_dynamic.html
    <script language="JavaScript" src="dynamic.js"></script>

    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
    2021-03-02 0 0
    Udostępnij to
    Dlaczego jest złożony? 0 odpowiedzi zostało zwiniętych

    Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się

    Polityka prywatności: https://zweryfikowac.pl/Polityka-prywatnosci.pdf
    Copyright © 2023, All Rights Reserved