Possible types: Element, HTML string, text, array, object or even a function returning a string.
.append() & .after() can potentially execute code. This can occur by
injection of script tags or use of HTML attributes that execute code
(for example, ). Do not use these methods to insert
strings obtained from untrusted sources such as URL query parameters,
cookies, or form inputs. Doing so can introduce cross-site-scripting
(XSS) vulnerabilities. Remove or escape any user input before adding
content to the document.
jQuery doesn't officially support SVG. Using jQuery methods on SVG
documents, unless explicitly documented for that method, might cause
unexpected behaviors. Examples of methods that support SVG as of
jQuery 3.0 are addClass and removeClass.
Appending an element to a container
Both solutions are appending the element #child (adding at the end) to the element #parent.
Note: When you append content that already exsists in the document, this content will be removed from its original parent container and appended to the new parent container. So you can't use .append() or .appendTo() to clone an element. If you need a clone use .clone() -> [http://api.jquery.com/clone/]
Efficient consecutive .append() usage
Appending inside a loop
You just received a big array of data. Now it's time to loop through and render it on the page.
Your first thought may be to do something like this:
This is perfectly valid and will render exactly what you'd expect, but...
DO NOT do this.
Remember those 300+ rows of data?
Each one will force the browser to re-calculate every element's width, height and positioning values, along with any other styles - unless they are separated by a layout boundary, which unfortunately for this example (as they are descendants of a <table> element), they cannot.
At small amounts and few columns, this performance penalty will certainly be negligible. But we want every millisecond to count.
Add to a separate array, append after loop completes
Out of these options, this one relies on jQuery the most.
Using modern Array.* methods
Functionally equivalent to the one before it, only easier to read.
Using strings of HTML (instead of jQuery built-in methods)
Perfectly valid but again, not recommended. This forces jQuery to parse a very large amount of text at once and is not necessary. jQuery is very good at what it does when used correctly.
Manually create elements, append to document fragment
My personal favorite. This illustrates a general idea of what jQuery does at a lower level.