DOM injection without jquery

Question

I am wondering how to inject HTML tags with DOM injection, without making use of the jquery library.

We want to generate several objects from an external javascript file, into the original page, but we don't want to be dependant on jquery (since it's 90kb) and we don't have control over the site which will use our script.

Great question. I see too many questions closed on here with casperOne's name on them. I came here form Google and got my answer. — user2143356, Apr 17 '13 at 14:47

JAR.JAR.beans · Accepted Answer · 2012-09-05T09:38:45.847

6

Either use

 object.innerHTML = "<br/><span>Text</span>"

Or use appendChild:

 var child = element.appendChild(child);

https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild?redirectlocale=en-US&redirectslug=DOM%2Felement.appendChild

Both works.

edited Sep 05 '12 at 09:38

answered Sep 05 '12 at 08:38

JAR.JAR.beans

9,668
4
45
57

Using `innerHTML` isn't really good practize! Use `appendChild` every time (if possible)! See: http://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnode – André Fiedler Nov 11 '13 at 15:56

score 3 · Answer 2 · answered Sep 05 '12 at 08:38

Are you just looking for:

newNode = document.createElement(tagType);

and

parent.appendChild(newNode);

For more information about document level functions, see https://developer.mozilla.org/en-US/docs/DOM/document

For methods that manipulate elements, see https://developer.mozilla.org/en-US/docs/DOM/element

Fabrizio Calderan · Answer 3 · 2012-09-05T08:49:52.963

If you have many elements to create and they are contained in a common root node, I suggest to create a documentFragment and append into it all the nodes you need to generate through createElement() and appendChild() methods

Then just append the documentFragment into the document

From MDN reference: createDocumentFragment

Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry). Consequently, using document fragments often results in better performance

DOM injection without jquery

3 Answers3