The difference between append, appendChild and innerHTML of JavaScript, getTime, createElement, createTextNode

Article directory

append
appendChild
innerHTML
the difference
performance
case
createTextNode
createElement
getTime

append

MDN

The Element.append method inserts a set of Node objects or DOMString objects after the last child node of the Element. The inserted DOMString object is equivalent to a Text node. Differences from Node.appendChild():
Element.append() allows appending DOMString objects, while Node.appendChild() only accepts Node objects.
Element.append() has no return value, while Node.appendChild() returns the added Node object.
Element.append() can append multiple nodes and strings, but Node.appendChild() can only append one node.

appendChild

w3school

The appendChild() method adds a node (element) as the last child to the element.

MDN

The Node.appendChild() method appends a node to the end of the list of children of the specified parent node. If the node to be inserted already exists in the document tree of the current document, then appendChild() will only move it from the original position to the new position (no need to remove the node to be moved beforehand ).
This means that it is impossible for a node to appear in different places in the document at the same time. So, if a node already has a parent, after being passed to this method, it will first be removed and then inserted in the new position. To keep a node already in the document, you can first use the Node.cloneNode() method to create a copy of it, and then attach the copy to the target parent node. Note that clones made with cloneNode are not automatically kept in sync.
If the given child node is a DocumentFragment, then the entire contents of the DocumentFragment will be transferred to the list of children of the specified parent node.
A newer API is available! > ParentNode.append() (en-US) method supports multiple parameters, accepts a string as a parameter, converts the string into a text node and appends it.

innerHTML

w3school

The innerHTML property sets or returns the HTML content (inner HTML) of an element.

MDN

The Element.innerHTML property sets or gets the descendant of the element in HTML syntax.
If a
, or </code> node has a text child node that contains the characters <code> & amp;</code>, <code><</code> or <code>></code>, <code>innerHTML</code> returns these characters as <code> & amp;amp;</code>, <code> & amp;lt;</code>, and <code> & amp;gt;</code>. Use Node.textContent to obtain a correct copy of the content of these text nodes. </mark><br /> If you want to insert a piece of <code>HTML</code> into an element instead of replacing its content, then use the insertAdjacentHTML() method. </strong></p> </blockquote> <h2>Difference</h2> <blockquote> <p><strong><code>append</code> can pass in multiple nodes or strings at the same time, and has no return value.<br /> <code>appendChild</code> can only pass one node, and does not directly support passing strings, you need to replace it with <code>appendChild(document.createTextElement('string'))</code>, and return the appended <code>Node</code> node; if the parameter of <code>appendChild()</code> is an element existing on the page, the original element will be removed after execution.<br /> What <code>innerHTML</code> adds is a pure string, and the properties of the inner element cannot be obtained; it is different from what <code>appendChild</code> adds to the <code>dom</code> object, and what is returned is also <code>dom</code> object, you can access various attributes of the element through the <code>dom</code> object. </strong></p> </blockquote> <h2>Performance</h2> <blockquote> <p><strong><code>innerHTML</code> is more convenient than <code>appendChild</code>, especially when the created node has many attributes and contains text.<br /> But in terms of execution speed, using <code>appendChild</code> is faster than <code>innerHTML</code>, especially when the content includes <code>html</code> tags, <code>appendChild</code>Obviously faster than <code>innerHTML</code>, this may be because <code>innerHTML</code> needs to parse the content before putting it on the page, when it contains <code>html< <code>innerHTML</code> will be significantly slower when there are too many /code> tags. </strong></p> <p><center></center></p> </blockquote> <h2>Case list</h2> <p><strong>html</strong></p> <pre><div id="test1"></div> <br> <input type="button" onclick="innerTest()" value="testInnerHTML"> <div id="test2"></div> <br> <input type="button" οnclick="appendTest()" value="testAppendChild"> </pre> <p><strong>JavaScript</strong></p> <pre>function innerTest() { let t1 = (new Date()).getTime(), t2 = undefined, a = "<b>apple</b>", b = document.getElementById("test1"); \t\t for (var i = 0; i < 500; i ++ ) b. innerHTML + = a; \t t2 = (new Date()).getTime(); \t console.log("testInnerHTML: " + (t2 - t1)); } function appendTest() { let t1 = (new Date()).getTime(), t2 = undefined, b = document.getElementById("test2"); \t\t for (var i = 0; i < 500; i ++ ) { let a = document. createElement("b"); \t\t a.appendChild(document.createTextNode("apple")); b. appendChild(a); } \t t2 = (new Date()).getTime(); \t console.log("testAppendChild: " + (t2 - t1)); } </pre> <h2>createTextNode</h2> <p><strong>MDN</strong></p> <blockquote> <p><strong>Creates a new text node. This method can be used to escape <code>HTML</code> characters. </strong></p> </blockquote> <p><strong>w3school</strong></p> <blockquote> <p>The <strong><code>createTextNode()</code> method creates a text node. </strong></p> </blockquote> <h2>createElement</h2> <p><strong>MDN</strong></p> <blockquote> <p><strong>In an HTML document, the <code>Document.createElement</code> method is used to create an <code>HTML</code> element specified by the tag name <code>tagName</code>. If the <code>tagName</code> is not recognized by the user agent, an unknown <code>HTML</code> element HTMLUnknownElement is generated. </strong></p> <p><center></center></p> </blockquote> <p><strong>w3school</strong></p> <blockquote> <p>The <strong><code>createElement</code> method creates an element node. </strong></p> </blockquote> <h2>getTime</h2> <p><strong>w3school</strong></p> <blockquote> <p>The <strong><code>getTime()</code> method returns the time from midnight on <code>1</code> of <code>1</code>, <code>1970</code> to the specified date milliseconds. </strong></p> </blockquote> <p><strong>MDN</strong></p> <blockquote> <p>The <strong><code>getTime()</code> method returns the Greenwich Mean Time value of a time.<br /> You can use this method to assign a datetime to another Date object. The function of this method is the same as the valueOf() method. </strong></p> <p><center></center></p> </blockquote> </div> </div> <footer class="entry-footer"> <span class="tags-links">Tagged <a href="https://syntaxbug.com/tag/append/" rel="tag">append</a>, <a href="https://syntaxbug.com/tag/createelement/" rel="tag">createelement</a>, <a href="https://syntaxbug.com/tag/diff/" rel="tag">diff</a>, <a href="https://syntaxbug.com/tag/difference/" rel="tag">difference</a>, <a href="https://syntaxbug.com/tag/element/" rel="tag">element</a>, <a href="https://syntaxbug.com/tag/etw/" rel="tag">etw</a>, <a href="https://syntaxbug.com/tag/get/" rel="tag">get</a>, <a href="https://syntaxbug.com/tag/gettime/" rel="tag">gettime</a>, <a href="https://syntaxbug.com/tag/html/" rel="tag">html</a>, <a href="https://syntaxbug.com/tag/ime/" rel="tag">ime</a>, <a href="https://syntaxbug.com/tag/innerhtml/" rel="tag">innerhtml</a>, <a href="https://syntaxbug.com/tag/java/" rel="tag">java</a>, <a href="https://syntaxbug.com/tag/javascript/" rel="tag">javascript</a>, <a href="https://syntaxbug.com/tag/ode/" rel="tag">ode</a>, <a href="https://syntaxbug.com/tag/pen/" rel="tag">pen</a>, <a href="https://syntaxbug.com/tag/script/" rel="tag">script</a>, <a href="https://syntaxbug.com/tag/tee/" rel="tag">tee</a>, <a href="https://syntaxbug.com/tag/tex/" rel="tag">tex</a>, <a href="https://syntaxbug.com/tag/text/" rel="tag">text</a>, <a href="https://syntaxbug.com/tag/time/" rel="tag">time</a></span> </footer> </article> <nav class="navigation post-navigation" role="navigation"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"><div class="nav-previous"><a href="https://syntaxbug.com/d233a6fe5d/" rel="prev">A high-performance memory pool implemented in C++</a></div><div class="nav-next"><a href="https://syntaxbug.com/ac713fbcc2/" rel="next">The vue front end acquires/switches the microphone, plays the collected audio and collects the volume</a></div></div> </nav> </main> </div> <aside id="secondary" class="widget-area col-sm-4"> <div id="search-2" class="widget widget_search"> <form role="search" method="get" class="search-form" action="https://syntaxbug.com/"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-search"></i></span> <input type="search" class="search-field form-control" placeholder="Search …" value="" name="s" /> <span class="input-group-btn"> <button class="btn btn-primary search-submit" type="submit">Search</button> </span> </div> </form></div> <div id="recent-posts-2" class="widget widget_recent_entries"> <h3 class="widget-title">Recent Posts</h3> <ul> <li> <a href="https://syntaxbug.com/57135e684b/">JSDoc, an alternative to TypeScript?</a> </li> <li> <a href="https://syntaxbug.com/65a6ec3938/">What channels can Python use to receive orders?</a> </li> <li> <a href="https://syntaxbug.com/c7f8f61d81/">ADO interface _RecordsetPtr pointer</a> </li> <li> <a href="https://syntaxbug.com/3c8a7c1f35/">Unity game development–Behavior tree (Part 2)</a> </li> <li> <a href="https://syntaxbug.com/d0626f740d/">Create efficient Python backend projects: you can’t miss these tools</a> </li> <li> <a href="https://syntaxbug.com/1d42e7327e/">Classification prediction of probabilistic neural network PNN based on cuckoo algorithm optimization – code attached</a> </li> <li> <a href="https://syntaxbug.com/3d05442eb4/">HikariCP connection pool: Possibly consider using a shorter maxLifetime value.</a> </li> <li> <a href="https://syntaxbug.com/9a64438825/">Detailed explanation of java HashMap source code</a> </li> <li> <a href="https://syntaxbug.com/558593ba14/">Android drag and drop startDragAndDrop drag and drop Glide to flexibly load stacked rounded corners, Kotlin (6)</a> </li> <li> <a href="https://syntaxbug.com/e11254af61/">Qt Drag&DropDrag and place</a> </li> <li> <a href="https://syntaxbug.com/bc655f3f79/">jsp+servlet hospital appointment registration system based on javaweb+mysql (java+jdbc+jsp+mysql+ajax)</a> </li> <li> <a href="https://syntaxbug.com/6e1ad9fbfb/">k8s custom Endpoint implements internal pod access to external applications</a> </li> <li> <a href="https://syntaxbug.com/8af302413b/">MySQL Backup and Recovery: Protecting Data Security and Business Continuity</a> </li> <li> <a href="https://syntaxbug.com/6d4c2a5546/">[milkv] 2. Add and test mpu6050 driver</a> </li> <li> <a href="https://syntaxbug.com/fde4afbea8/">[milkv] 1. Light sensor bh1750 driver addition and testing</a> </li> </ul> </div></aside> </div> </div> <footer id="colophon" class="site-footer"> <div class="container"> <div class="site-info"> <div class="pull-right"> syntaxbug.com © 2021 All Rights Reserved. </div> </div> </div> </footer> </div> <div class="empty-node hidden"></div><script type='text/javascript'> var codePrettifyLoaderBaseUrl = "https:\/\/syntaxbug.com\/wp-content\/plugins\/code-prettify\/prettify"; </script> <script type='text/javascript' src='https://syntaxbug.com/wp-content/plugins/code-prettify/prettify/run_prettify.js?ver=1.4.0'></script> <script type='text/javascript' src='https://syntaxbug.com/wp-content/themes/bestblogger/vendor/bootstrap/js/bootstrap.min.js?ver=5.0'></script> <script type='text/javascript' src='https://syntaxbug.com/wp-content/themes/bestblogger/js/navigation.js?ver=20151215'></script> <script type='text/javascript' src='https://syntaxbug.com/wp-content/themes/bestblogger/js/skip-link-focus-fix.js?ver=20151215'></script> <script type='text/javascript' src='https://syntaxbug.com/wp-includes/js/comment-reply.min.js?ver=5.0'></script> <script type='text/javascript' src='https://syntaxbug.com/wp-content/themes/bestblogger/js/script.js?ver=5.0'></script> <script type='text/javascript' src='https://syntaxbug.com/wp-includes/js/wp-embed.min.js?ver=5.0'></script> </body> </html>