{"id":2274,"date":"2021-11-26T06:24:12","date_gmt":"2021-11-26T06:24:12","guid":{"rendered":"https:\/\/blog.embold.io\/?p=2274"},"modified":"2021-11-26T06:25:25","modified_gmt":"2021-11-26T06:25:25","slug":"difference-between-append-and-appendchild-methods-in-javascript","status":"publish","type":"post","link":"https:\/\/blog.embold.io\/ru\/difference-between-append-and-appendchild-methods-in-javascript\/","title":{"rendered":"Difference between append and appendChild methods in JavaScript"},"content":{"rendered":"\n<p> The <code>append <\/code>and <code>appendChild<\/code> Javascript methods are both used to \u2014 as their names imply \u2014 insert items at the end of the elements or\u00a0<a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Node\">node object<\/a>\u00a0they\u2019re attached to. As much as they both can be used interchangeably, there are a few subtle differences between the two methods.\u00a0 <\/p>\n\n\n\n<ul><li>The <code>append <\/code>method is used to insert either Node objects or DOMStrings (basically a string or text) into the DOM, while the <code>appendChild <\/code>method can only be used to insert Node objects into the DOM. <\/li><\/ul>\n\n\n\n<p>For example, with the <code>append <\/code>method, you can do: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let div = document.createElement(\"div\")\n\n\/\/insert a DOM node\nlet p = document.createElement(\"p\");\ndiv.append(p);\nconsole.log(div) \/\/&lt;div&gt;&lt;p&gt;&lt;\/p&gt;&lt;\/div&gt;\n\n\/\/insert a DOMString\ndiv.append(\u2018&lt;p&gt;Hello&lt;\/p&gt;\u2019)\nconsole.log(div) \/\/&lt;div&gt;&lt;p&gt;Hello&lt;\/p&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>With the <code>appendChild <\/code>method,<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let div = document.createElement(\"div\")\n\n\/\/insert a DOM node\nlet p = document.createElement(\"p\");\ndiv.appendChild(p);\nconsole.log(div) \/\/&lt;div&gt;&lt;p&gt;&lt;\/p&gt;&lt;\/div&gt;\n\n\/\/insert a DOMString\ndiv.appendChild(\u2018&lt;p&gt;Hello&lt;\/p&gt;\u2019) \/\/This results in an Uncaught TypeError: Failed to execute 'appendChild' on 'Node'<\/code><\/pre>\n\n\n\n<ul><li> The <code>append <\/code>method can insert multiple items at once, but the <code>appendChild <\/code>method can\u2019t. <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>div.append(child, childTwo); \/\/ Works fine\ndiv.appendChild(child, childTwo,); \/\/ Works fine, but adds the first element and ignores the rest<\/code><\/pre>\n\n\n\n<ul><li>According to <a href=\"https:\/\/caniuse.com\/mdn-api_element_append\">caniuse<\/a>, the <code>append <\/code>method is not supported in IE. <\/li><\/ul>\n\n\n\n<p>In summary, <code>appendChild <\/code>can be used interchangeably with append, but not vice versa.<\/p>\n\n\n<p><span style=\"color: #ff0000\">Blog Credits: Linda Ikechukwu<\/span><\/p>\n<div>\u201d Linda Ikechukwu is a Frontend Developer turned Technical Content Consultant. She enjoys strategizing on and creating content that helps tech startups connect with their target audience. \u201c<br \/><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-2189\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/Linda-headshot.jpeg\" alt=\"\" width=\"150\" height=\"210\" srcset=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/Linda-headshot.jpeg 715w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/Linda-headshot-585x819.jpeg 585w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/div>","protected":false},"excerpt":{"rendered":"<p>The append and appendChild Javascript methods are both used to \u2014 as their names imply \u2014 insert items at the end of the elements or\u00a0node object\u00a0they\u2019re attached to. As much&hellip;<\/p>\n","protected":false},"author":10,"featured_media":2275,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[244,245,31,127],"better_featured_image":{"id":2275,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":1280,"height":853,"file":"2021\/11\/Difference-between-append-and-appendChild-methods-in-JavaScript.jpg","sizes":{"thumbnail":{"file":"Difference-between-append-and-appendChild-methods-in-JavaScript-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-append-and-appendChild-methods-in-JavaScript-150x150.jpg"},"medium_large":{"file":"Difference-between-append-and-appendChild-methods-in-JavaScript-768x512.jpg","width":768,"height":512,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-append-and-appendChild-methods-in-JavaScript-768x512.jpg"},"penci-full-thumb":{"file":"Difference-between-append-and-appendChild-methods-in-JavaScript-1170x780.jpg","width":1170,"height":780,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-append-and-appendChild-methods-in-JavaScript-1170x780.jpg"},"penci-slider-thumb":{"file":"Difference-between-append-and-appendChild-methods-in-JavaScript-1170x663.jpg","width":1170,"height":663,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-append-and-appendChild-methods-in-JavaScript-1170x663.jpg"},"penci-magazine-slider":{"file":"Difference-between-append-and-appendChild-methods-in-JavaScript-780x516.jpg","width":780,"height":516,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-append-and-appendChild-methods-in-JavaScript-780x516.jpg"},"penci-slider-full-thumb":{"file":"Difference-between-append-and-appendChild-methods-in-JavaScript-1280x800.jpg","width":1280,"height":800,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-append-and-appendChild-methods-in-JavaScript-1280x800.jpg"},"penci-thumb":{"file":"Difference-between-append-and-appendChild-methods-in-JavaScript-585x390.jpg","width":585,"height":390,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-append-and-appendChild-methods-in-JavaScript-585x390.jpg"},"penci-masonry-thumb":{"file":"Difference-between-append-and-appendChild-methods-in-JavaScript-585x390.jpg","width":585,"height":390,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-append-and-appendChild-methods-in-JavaScript-585x390.jpg"},"penci-thumb-square":{"file":"Difference-between-append-and-appendChild-methods-in-JavaScript-585x585.jpg","width":585,"height":585,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-append-and-appendChild-methods-in-JavaScript-585x585.jpg"},"penci-thumb-vertical":{"file":"Difference-between-append-and-appendChild-methods-in-JavaScript-480x650.jpg","width":480,"height":650,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-append-and-appendChild-methods-in-JavaScript-480x650.jpg"},"penci-thumb-small":{"file":"Difference-between-append-and-appendChild-methods-in-JavaScript-263x175.jpg","width":263,"height":175,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-append-and-appendChild-methods-in-JavaScript-263x175.jpg"},"jr_insta_square":{"file":"Difference-between-append-and-appendChild-methods-in-JavaScript-640x640.jpg","width":640,"height":640,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-append-and-appendChild-methods-in-JavaScript-640x640.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":2274,"source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/11\/Difference-between-append-and-appendChild-methods-in-JavaScript.jpg"},"translation":{"provider":"WPGlobus","version":"2.10.8","language":"ru","enabled_languages":["en","es","de","fr","ru"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"es":{"title":false,"content":false,"excerpt":false},"de":{"title":false,"content":false,"excerpt":false},"fr":{"title":false,"content":false,"excerpt":false},"ru":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/posts\/2274"}],"collection":[{"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/comments?post=2274"}],"version-history":[{"count":2,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/posts\/2274\/revisions"}],"predecessor-version":[{"id":2277,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/posts\/2274\/revisions\/2277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/media\/2275"}],"wp:attachment":[{"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/media?parent=2274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/categories?post=2274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embold.io\/ru\/wp-json\/wp\/v2\/tags?post=2274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}