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ć?
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">
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.
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;
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

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