Dynamically creating HTML elements using Javascript?

Question

Dynamically creating HTML elements using Javascript?

I want to dynamically create some HTML elements (3 html element) and then return this html code as a string in a variable. I do not want to write HTML code in the following function for some div, but I want to return it to 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 }

How can i do this?

+7

javascript dom html

dojoX Apr 4 '11 at 9:18

source share

5 answers

Kooiinc · Answer 1 · 2011-04-04T09:30:31+0000

You can create an element using document.createElement . Once created, you can add attributes. If you want the element to appear in your document, you must insert it into the DOM tree of the document. Try playing with this code:

 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

If this is only html, you want this to be the approach:

 function createmyElements(id1,id2,id3){ return [ '<a href="some link" id="', id1, '">linktxt</a>', '<div id="" ', id2, '"></div>', '<someElement id="', id3, '"></someElement>' ].join('\n'); }

Another approach is to create a div without inserting it into the DOM tree and adding elements to it using the DOM methods. Here is the function to create 1 item

 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"></div>

Sufendy · Answer 2 · 2011-04-04T09:24:27+0000

You can build html as a string in one variable, for example

 var html = ""; html += "<a id='" + id1 +"'>link</a>"; html += "<div id='" + id1 +"'>div</div>"; // ... and so on

then you return the html variable

 return html;

Guidhouse · Answer 3 · 2011-04-04T09:39:27+0000

Html:

 <div id="main"></div>

JavaScript:

 var tree = document.createDocumentFragment(); var link = document.createElement("a"); link.setAttribute("id", "id1"); link.setAttribute("href", "http://site.com"); 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);

The main reason for using the Fragment document instead of just adding elements is the speed of execution.

With this size, it doesn’t matter, but when you start adding hundreds of elements, you will appreciate it first in memory :-)

Using documentFragment you can build a whole tree of DOM elements in memory and will not affect the browser DOM until the last moment.

Otherwise, it causes the browser to be updated for each item, which can sometimes be a real pain to view.

parasrish · Answer 4 · 2017-03-30T12:33:15+0000

Here is a simple illustration for converting an html page (static) to a html page (dynamic) based on javascript.

Say you have an html page like "index.html" (calling index_static.html here).

index_static.html

 <!DOCTYPE HTML> <html> <head> <title>Test</title> </head> <body> <h1> Hello !!! </h1> </body> </html>

You can open this file in a browser to see the desired result.

Now let's create the javascript equivalent. Use the online tool to generate javascript source code (by pasting the above html file into it). Therefore, it follows that:

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(" <h1> Hello !!! <\/h1>"); document.write(" <\/body>"); document.write("<\/html>");

And now your dynamic version of static_index.html will look like this:

index_dynamic.html

 <script language="JavaScript" src="dynamic.js"></script>

Open index_dynamic.html in a browser to check the web page (dynamically, but down).

more details

akinuri · Answer 5 · 2019-04-11T12:06:57+0000

If you do this repeatedly (dynamically creating HTML), you can use a more general approach.

If you want to create three unrelated elements, you can do:

 var anchor = elem("a", {"id":"id1"}); var div = elem("div", {"id":"id2"}); var xyz = elem("div", {"id":"id3"});

You now have three elements. If you want to get the HTML code (as a string), simply do:

 var html = anchor.outerHTML + div.outerHTML + xyz.outerHTML;

If you want to have these three elements (say a div), do:

 var div = elem("div", null, [ elem("a", {"id":"id1"}), elem("div", {"id":"id2"}), elem("div", {"id":"id3"}), ]);

You can get HTML using div.outerHTML or just add it anywhere.

To learn more about elem() , visit element.js (GitHub) .

_{I am adding this answer not for an 8-year-old question, but for future visitors.} _{Hope it helps.}

Dynamically creating HTML elements using Javascript?

More articles: