Entendendo o m\u00e9todo append() em JavaScript<\/title><br \/>\n<\/head><br \/>\n<body><\/p>\n<h1>Entendendo o m\u00e9todo append() em JavaScript<\/h1>\n<h2>Como funciona o m\u00e9todo append()<\/h2>\n<p>O m\u00e9todo append() \u00e9 uma fun\u00e7\u00e3o nativa do JavaScript que nos permite adicionar elementos ao HTML de forma din\u00e2mica. Com esse m\u00e9todo, podemos manipular o conte\u00fado do nosso documento, seja para adicionar novos elementos, como elementos de texto, imagens, links, ou modificar elementos j\u00e1 existentes.<\/p>\n<h3>Como funciona o m\u00e9todo append():<\/h3>\n<p>O m\u00e9todo append() \u00e9 utilizado para adicionar um ou mais elementos ao final de um elemento espec\u00edfico no HTML. Esses elementos podem ser criados dinamicamente ou selecionados a partir do DOM (Modelo de Objeto de Documento).<\/p>\n<p>Por exemplo, suponha que voc\u00ea tenha uma div com o id “container” em seu documento HTML e queira adicionar um par\u00e1grafo dentro dessa div. Voc\u00ea pode fazer isso utilizando o m\u00e9todo append() da seguinte forma:<\/p>\n<pre>\n<code>\nvar container = document.getElementById(\"container\");\nvar paragrafo = document.createElement(\"p\");\nparagrafo.innerHTML = \"Este \u00e9 um novo par\u00e1grafo adicionado ao HTML dinamicamente.\";\ncontainer.append(paragrafo);\n<\/code>\n<\/pre>\n<p>Neste exemplo, criamos um novo elemento de par\u00e1grafo utilizando a fun\u00e7\u00e3o createElement() e atribu\u00edmos um conte\u00fado ao par\u00e1grafo utilizando a propriedade innerHTML. Em seguida, utilizamos o m\u00e9todo append() para adicionar o par\u00e1grafo ao final da div com o id “container”.<\/p>\n<h2>Como adicionar elementos ao HTML usando o m\u00e9todo append()<\/h2>\n<p>O m\u00e9todo append() nos permite adicionar n\u00e3o apenas elementos j\u00e1 criados, mas tamb\u00e9m criar novos elementos diretamente em nosso c\u00f3digo JavaScript. Podemos utilizar tanto elementos HTML existentes, como par\u00e1grafos, imagens, links, quanto elementos personalizados criados por n\u00f3s.<\/p>\n<p>Veja um exemplo de como adicionar um novo elemento ao documento HTML:<\/p>\n<pre>\n<code>\nvar novoElemento = document.createElement(\"h2\");\nnovoElemento.innerHTML = \"T\u00edtulo adicionado dinamicamente\";\ndocument.body.append(novoElemento);\n<\/code>\n<\/pre>\n<p>Neste exemplo, utilizamos o m\u00e9todo createElement() para criar um novo elemento de t\u00edtulo h2 e atribu\u00edmos um conte\u00fado ao elemento utilizando o innerHTML. Em seguida, utilizamos o m\u00e9todo append() para adicionar o novo elemento ao final do body do documento HTML.<\/p>\n<p>Tamb\u00e9m \u00e9 poss\u00edvel adicionar v\u00e1rios elementos ao mesmo tempo utilizando o m\u00e9todo append(). Podemos passar por par\u00e2metro quantos elementos desejarmos e eles ser\u00e3o adicionados na ordem em que foram definidos.<\/p>\n<h2>Exemplos pr\u00e1ticos de uso do m\u00e9todo append() em JavaScript<\/h2>\n<p>Vamos explorar alguns exemplos pr\u00e1ticos de como utilizar o m\u00e9todo append() em diferentes situa\u00e7\u00f5es.<\/p>\n<h3>1. Adicionando um bot\u00e3o com evento de clique:<\/h3>\n<p>Imagine que voc\u00ea precise adicionar um bot\u00e3o ao seu documento HTML e deseje atribuir um evento de clique a ele. Podemos fazer isso utilizando o m\u00e9todo append(), como no exemplo abaixo:<\/p>\n<pre>\n<code>\nvar botao = document.createElement(\"button\");\nbotao.innerHTML = \"Clique aqui\";\nbotao.addEventListener(\"click\", function() {\n alert(\"Voc\u00ea clicou no bot\u00e3o!\");\n});\n\ndocument.body.append(botao);\n<\/code>\n<\/pre>\n<p>Nesse exemplo, criamos um elemento de bot\u00e3o, definimos seu conte\u00fado de texto utilizando o innerHTML e atribu\u00edmos um evento de clique utilizando a fun\u00e7\u00e3o addEventListener(). Por fim, utilizamos o m\u00e9todo append() para adicionar o bot\u00e3o ao final do body do documento HTML.<\/p>\n<h3>2. Adicionando uma lista de itens:<\/h3>\n<p>Outro exemplo comum \u00e9 adicionar uma lista de itens ao documento HTML. Com o m\u00e9todo append(), podemos facilmente criar e adicionar uma lista de itens ao HTML, como no exemplo a seguir:<\/p>\n<pre>\n<code>\nvar lista = document.createElement(\"ul\");\n\nvar itens = [\"Item 1\", \"Item 2\", \"Item 3\"];\nitens.forEach(function(item) {\n var li = document.createElement(\"li\");\n li.innerHTML = item;\n lista.append(li);\n});\n\ndocument.body.append(lista);\n<\/code>\n<\/pre>\n<p>Neste exemplo, criamos um elemento de lista ul e um array com os itens que desejamos adicionar. Utilizando um loop forEach(), criamos um elemento de item de lista li para cada item do array e adicionamos o conte\u00fado utilizando o innerHTML. Por fim, utilizamos o m\u00e9todo append() para adicionar cada item \u00e0 lista e a lista ao final do body do documento HTML.<\/p>\n<h2>Dicas e melhores pr\u00e1ticas para utilizar o m\u00e9todo append() corretamente em seu c\u00f3digo<\/h2>\n<p>Ao utilizar o m\u00e9todo append() em seu c\u00f3digo JavaScript, \u00e9 importante seguir algumas boas pr\u00e1ticas para garantir um c\u00f3digo limpo e eficiente:<\/p>\n<h3>1. Separe a l\u00f3gica de cria\u00e7\u00e3o dos elementos da l\u00f3gica de adi\u00e7\u00e3o.<\/h3>\n<p>\u00c9 recomend\u00e1vel criar os elementos separadamente e atribuir seu conte\u00fado antes de adicion\u00e1-los ao HTML utilizando o m\u00e9todo append(). Isso torna o c\u00f3digo mais leg\u00edvel e facilita poss\u00edveis modifica\u00e7\u00f5es futuras.<\/p>\n<h3>2. Utilize vari\u00e1veis para armazenar elementos reutiliz\u00e1veis.<\/h3>\n<p>Se voc\u00ea precisar adicionar o mesmo elemento em diferentes partes do seu c\u00f3digo, \u00e9 recomend\u00e1vel armazen\u00e1-lo em uma vari\u00e1vel para reutiliz\u00e1-lo posteriormente, em vez de criar um novo elemento toda vez.<\/p>\n<h3>3. Domine a manipula\u00e7\u00e3o do DOM (Modelo de Objeto de Documento).<\/h3>\n<p>O DOM \u00e9 uma representa\u00e7\u00e3o em mem\u00f3ria do documento HTML, e conhec\u00ea-lo bem \u00e9 essencial para utilizar corretamente o m\u00e9todo append() e outras fun\u00e7\u00f5es de manipula\u00e7\u00e3o do DOM.<\/p>\n<p>Conclus\u00e3o<\/p>\n<p>O m\u00e9todo append() \u00e9 uma ferramenta poderosa do JavaScript que nos permite adicionar elementos ao HTML de forma din\u00e2mica. Com ele, podemos criar novos elementos personalizados, modificar conte\u00fados existentes e at\u00e9 mesmo adicionar eventos a elementos rec\u00e9m-criados.<\/p>\n<p>Ao entender e dominar o uso do m\u00e9todo append(), voc\u00ea ter\u00e1 mais flexibilidade e controle sobre a manipula\u00e7\u00e3o do HTML em seu c\u00f3digo JavaScript. Lembre-se de seguir as boas pr\u00e1ticas e utilizar o m\u00e9todo de forma eficiente, separando a l\u00f3gica de cria\u00e7\u00e3o e adi\u00e7\u00e3o de elementos, utilizando vari\u00e1veis para armazenar elementos reutiliz\u00e1veis e dominando a manipula\u00e7\u00e3o do DOM.<\/p>\n<p>Experimente utilizar o m\u00e9todo append() em seus projetos e descubra o poder dessa funcionalidade para tornar seus scripts mais din\u00e2micos e interativos.<\/p>\n<h2>A Awari \u00e9 a melhor plataforma para aprender sobre programa\u00e7\u00e3o no Brasil.<\/h2>\n<p>Aqui voc\u00ea encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu pr\u00f3ximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.<\/p>\n<p>J\u00e1 pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? <a href=\"https:\/\/app.fluency.io\/br\/blog\/candidatura?&utm_source=blog&utm_campaign=paragrafofinal\">Clique aqui<\/a> para se inscrever na Awari e come\u00e7ar a construir agora mesmo o pr\u00f3ximo cap\u00edtulo da sua carreira em dados.<\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O m\u00e9todo append() em JavaScript permite adicionar elementos ao HTML de forma din\u00e2mica. Saiba como utilizar esse m\u00e9todo para adicionar elementos existentes, criar novos elementos personalizados e aplicar boas pr\u00e1ticas de utiliza\u00e7\u00e3o. Confira exemplos pr\u00e1ticos de uso do m\u00e9todo append() para adicionar um bot\u00e3o com evento de clique e uma lista de itens. Aprenda dicas como separar a l\u00f3gica de cria\u00e7\u00e3o dos elementos, utilizar vari\u00e1veis para armazenar elementos reutiliz\u00e1veis e dominar a manipula\u00e7\u00e3o do DOM. Utilize o m\u00e9todo append() corretamente e torne seus scripts mais din\u00e2micos e interativos. Conhe\u00e7a a Awari, a melhor plataforma para aprender programa\u00e7\u00e3o no Brasil, e transforme sua carreira em dados.<\/p>\n","protected":false},"author":9,"featured_media":27867,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-114807","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"\n<title>Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML - Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"O m\u00e9todo append() em JavaScript permite adicionar elementos ao HTML de forma din\u00e2mica. Saiba como utilizar esse m\u00e9todo para adicionar elementos existentes,...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML - Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"O m\u00e9todo append() em JavaScript permite adicionar elementos ao HTML de forma din\u00e2mica. Saiba como utilizar esse m\u00e9todo para adicionar elementos existentes,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-08T21:48:46+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"kaue\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/\",\"url\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/\",\"name\":\"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML - Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2023-08-08T21:48:46+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"O m\u00e9todo append() em JavaScript permite adicionar elementos ao HTML de forma din\u00e2mica. Saiba como utilizar esse m\u00e9todo para adicionar elementos existentes,...\",\"breadcrumb\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\",\"width\":1027,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/homolog.fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency.io Brasil\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fluency.io\/br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\",\"name\":\"kaue\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"caption\":\"kaue\"},\"url\":\"https:\/\/homolog.fluency.io\/br\/author\/kaue\/\"}]}<\/script>\n","yoast_head_json":{"title":"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML - Fluency.io Brasil","description":"O m\u00e9todo append() em JavaScript permite adicionar elementos ao HTML de forma din\u00e2mica. Saiba como utilizar esse m\u00e9todo para adicionar elementos existentes,...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML - Fluency.io Brasil","og_description":"O m\u00e9todo append() em JavaScript permite adicionar elementos ao HTML de forma din\u00e2mica. Saiba como utilizar esse m\u00e9todo para adicionar elementos existentes,...","og_url":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/","og_site_name":"Fluency.io Brasil","article_published_time":"2023-08-08T21:48:46+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/","url":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/","name":"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML - Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#primaryimage"},"image":{"@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#primaryimage"},"thumbnailUrl":"","datePublished":"2023-08-08T21:48:46+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"O m\u00e9todo append() em JavaScript permite adicionar elementos ao HTML de forma din\u00e2mica. Saiba como utilizar esse m\u00e9todo para adicionar elementos existentes,...","breadcrumb":{"@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#primaryimage","url":"","contentUrl":"","width":1027,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/homolog.fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency.io Brasil","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fluency.io\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a","name":"kaue","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","caption":"kaue"},"url":"https:\/\/homolog.fluency.io\/br\/author\/kaue\/"}]}},"_links":{"self":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/114807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/comments?post=114807"}],"version-history":[{"count":0,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/114807\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/media?parent=114807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/categories?post=114807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/tags?post=114807"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/format?post=114807"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=114807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":114807,"date":"2023-08-08T18:48:46","date_gmt":"2023-08-08T21:48:46","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/"},"modified":"2023-08-08T18:48:46","modified_gmt":"2023-08-08T21:48:46","slug":"como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/","title":{"rendered":"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML"},"content":{"rendered":"

\n
\n
\nEntendendo o m\u00e9todo append() em JavaScript<\/title><br \/>\n<\/head><br \/>\n<body><\/p>\n<h1>Entendendo o m\u00e9todo append() em JavaScript<\/h1>\n<h2>Como funciona o m\u00e9todo append()<\/h2>\n<p>O m\u00e9todo append() \u00e9 uma fun\u00e7\u00e3o nativa do JavaScript que nos permite adicionar elementos ao HTML de forma din\u00e2mica. Com esse m\u00e9todo, podemos manipular o conte\u00fado do nosso documento, seja para adicionar novos elementos, como elementos de texto, imagens, links, ou modificar elementos j\u00e1 existentes.<\/p>\n<h3>Como funciona o m\u00e9todo append():<\/h3>\n<p>O m\u00e9todo append() \u00e9 utilizado para adicionar um ou mais elementos ao final de um elemento espec\u00edfico no HTML. Esses elementos podem ser criados dinamicamente ou selecionados a partir do DOM (Modelo de Objeto de Documento).<\/p>\n<p>Por exemplo, suponha que voc\u00ea tenha uma div com o id “container” em seu documento HTML e queira adicionar um par\u00e1grafo dentro dessa div. Voc\u00ea pode fazer isso utilizando o m\u00e9todo append() da seguinte forma:<\/p>\n<pre>\n<code>\nvar container = document.getElementById(\"container\");\nvar paragrafo = document.createElement(\"p\");\nparagrafo.innerHTML = \"Este \u00e9 um novo par\u00e1grafo adicionado ao HTML dinamicamente.\";\ncontainer.append(paragrafo);\n<\/code>\n<\/pre>\n<p>Neste exemplo, criamos um novo elemento de par\u00e1grafo utilizando a fun\u00e7\u00e3o createElement() e atribu\u00edmos um conte\u00fado ao par\u00e1grafo utilizando a propriedade innerHTML. Em seguida, utilizamos o m\u00e9todo append() para adicionar o par\u00e1grafo ao final da div com o id “container”.<\/p>\n<h2>Como adicionar elementos ao HTML usando o m\u00e9todo append()<\/h2>\n<p>O m\u00e9todo append() nos permite adicionar n\u00e3o apenas elementos j\u00e1 criados, mas tamb\u00e9m criar novos elementos diretamente em nosso c\u00f3digo JavaScript. Podemos utilizar tanto elementos HTML existentes, como par\u00e1grafos, imagens, links, quanto elementos personalizados criados por n\u00f3s.<\/p>\n<p>Veja um exemplo de como adicionar um novo elemento ao documento HTML:<\/p>\n<pre>\n<code>\nvar novoElemento = document.createElement(\"h2\");\nnovoElemento.innerHTML = \"T\u00edtulo adicionado dinamicamente\";\ndocument.body.append(novoElemento);\n<\/code>\n<\/pre>\n<p>Neste exemplo, utilizamos o m\u00e9todo createElement() para criar um novo elemento de t\u00edtulo h2 e atribu\u00edmos um conte\u00fado ao elemento utilizando o innerHTML. Em seguida, utilizamos o m\u00e9todo append() para adicionar o novo elemento ao final do body do documento HTML.<\/p>\n<p>Tamb\u00e9m \u00e9 poss\u00edvel adicionar v\u00e1rios elementos ao mesmo tempo utilizando o m\u00e9todo append(). Podemos passar por par\u00e2metro quantos elementos desejarmos e eles ser\u00e3o adicionados na ordem em que foram definidos.<\/p>\n<h2>Exemplos pr\u00e1ticos de uso do m\u00e9todo append() em JavaScript<\/h2>\n<p>Vamos explorar alguns exemplos pr\u00e1ticos de como utilizar o m\u00e9todo append() em diferentes situa\u00e7\u00f5es.<\/p>\n<h3>1. Adicionando um bot\u00e3o com evento de clique:<\/h3>\n<p>Imagine que voc\u00ea precise adicionar um bot\u00e3o ao seu documento HTML e deseje atribuir um evento de clique a ele. Podemos fazer isso utilizando o m\u00e9todo append(), como no exemplo abaixo:<\/p>\n<pre>\n<code>\nvar botao = document.createElement(\"button\");\nbotao.innerHTML = \"Clique aqui\";\nbotao.addEventListener(\"click\", function() {\n alert(\"Voc\u00ea clicou no bot\u00e3o!\");\n});\n\ndocument.body.append(botao);\n<\/code>\n<\/pre>\n<p>Nesse exemplo, criamos um elemento de bot\u00e3o, definimos seu conte\u00fado de texto utilizando o innerHTML e atribu\u00edmos um evento de clique utilizando a fun\u00e7\u00e3o addEventListener(). Por fim, utilizamos o m\u00e9todo append() para adicionar o bot\u00e3o ao final do body do documento HTML.<\/p>\n<h3>2. Adicionando uma lista de itens:<\/h3>\n<p>Outro exemplo comum \u00e9 adicionar uma lista de itens ao documento HTML. Com o m\u00e9todo append(), podemos facilmente criar e adicionar uma lista de itens ao HTML, como no exemplo a seguir:<\/p>\n<pre>\n<code>\nvar lista = document.createElement(\"ul\");\n\nvar itens = [\"Item 1\", \"Item 2\", \"Item 3\"];\nitens.forEach(function(item) {\n var li = document.createElement(\"li\");\n li.innerHTML = item;\n lista.append(li);\n});\n\ndocument.body.append(lista);\n<\/code>\n<\/pre>\n<p>Neste exemplo, criamos um elemento de lista ul e um array com os itens que desejamos adicionar. Utilizando um loop forEach(), criamos um elemento de item de lista li para cada item do array e adicionamos o conte\u00fado utilizando o innerHTML. Por fim, utilizamos o m\u00e9todo append() para adicionar cada item \u00e0 lista e a lista ao final do body do documento HTML.<\/p>\n<h2>Dicas e melhores pr\u00e1ticas para utilizar o m\u00e9todo append() corretamente em seu c\u00f3digo<\/h2>\n<p>Ao utilizar o m\u00e9todo append() em seu c\u00f3digo JavaScript, \u00e9 importante seguir algumas boas pr\u00e1ticas para garantir um c\u00f3digo limpo e eficiente:<\/p>\n<h3>1. Separe a l\u00f3gica de cria\u00e7\u00e3o dos elementos da l\u00f3gica de adi\u00e7\u00e3o.<\/h3>\n<p>\u00c9 recomend\u00e1vel criar os elementos separadamente e atribuir seu conte\u00fado antes de adicion\u00e1-los ao HTML utilizando o m\u00e9todo append(). Isso torna o c\u00f3digo mais leg\u00edvel e facilita poss\u00edveis modifica\u00e7\u00f5es futuras.<\/p>\n<h3>2. Utilize vari\u00e1veis para armazenar elementos reutiliz\u00e1veis.<\/h3>\n<p>Se voc\u00ea precisar adicionar o mesmo elemento em diferentes partes do seu c\u00f3digo, \u00e9 recomend\u00e1vel armazen\u00e1-lo em uma vari\u00e1vel para reutiliz\u00e1-lo posteriormente, em vez de criar um novo elemento toda vez.<\/p>\n<h3>3. Domine a manipula\u00e7\u00e3o do DOM (Modelo de Objeto de Documento).<\/h3>\n<p>O DOM \u00e9 uma representa\u00e7\u00e3o em mem\u00f3ria do documento HTML, e conhec\u00ea-lo bem \u00e9 essencial para utilizar corretamente o m\u00e9todo append() e outras fun\u00e7\u00f5es de manipula\u00e7\u00e3o do DOM.<\/p>\n<p>Conclus\u00e3o<\/p>\n<p>O m\u00e9todo append() \u00e9 uma ferramenta poderosa do JavaScript que nos permite adicionar elementos ao HTML de forma din\u00e2mica. Com ele, podemos criar novos elementos personalizados, modificar conte\u00fados existentes e at\u00e9 mesmo adicionar eventos a elementos rec\u00e9m-criados.<\/p>\n<p>Ao entender e dominar o uso do m\u00e9todo append(), voc\u00ea ter\u00e1 mais flexibilidade e controle sobre a manipula\u00e7\u00e3o do HTML em seu c\u00f3digo JavaScript. Lembre-se de seguir as boas pr\u00e1ticas e utilizar o m\u00e9todo de forma eficiente, separando a l\u00f3gica de cria\u00e7\u00e3o e adi\u00e7\u00e3o de elementos, utilizando vari\u00e1veis para armazenar elementos reutiliz\u00e1veis e dominando a manipula\u00e7\u00e3o do DOM.<\/p>\n<p>Experimente utilizar o m\u00e9todo append() em seus projetos e descubra o poder dessa funcionalidade para tornar seus scripts mais din\u00e2micos e interativos.<\/p>\n<h2>A Awari \u00e9 a melhor plataforma para aprender sobre programa\u00e7\u00e3o no Brasil.<\/h2>\n<p>Aqui voc\u00ea encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu pr\u00f3ximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.<\/p>\n<p>J\u00e1 pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? <a href=\"https:\/\/app.fluency.io\/br\/blog\/candidatura?&utm_source=blog&utm_campaign=paragrafofinal\">Clique aqui<\/a> para se inscrever na Awari e come\u00e7ar a construir agora mesmo o pr\u00f3ximo cap\u00edtulo da sua carreira em dados.<\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O m\u00e9todo append() em JavaScript permite adicionar elementos ao HTML de forma din\u00e2mica. Saiba como utilizar esse m\u00e9todo para adicionar elementos existentes, criar novos elementos personalizados e aplicar boas pr\u00e1ticas de utiliza\u00e7\u00e3o. Confira exemplos pr\u00e1ticos de uso do m\u00e9todo append() para adicionar um bot\u00e3o com evento de clique e uma lista de itens. Aprenda dicas como separar a l\u00f3gica de cria\u00e7\u00e3o dos elementos, utilizar vari\u00e1veis para armazenar elementos reutiliz\u00e1veis e dominar a manipula\u00e7\u00e3o do DOM. Utilize o m\u00e9todo append() corretamente e torne seus scripts mais din\u00e2micos e interativos. Conhe\u00e7a a Awari, a melhor plataforma para aprender programa\u00e7\u00e3o no Brasil, e transforme sua carreira em dados.<\/p>\n","protected":false},"author":9,"featured_media":27867,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-114807","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"\n<title>Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML - Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"O m\u00e9todo append() em JavaScript permite adicionar elementos ao HTML de forma din\u00e2mica. Saiba como utilizar esse m\u00e9todo para adicionar elementos existentes,...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML - Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"O m\u00e9todo append() em JavaScript permite adicionar elementos ao HTML de forma din\u00e2mica. Saiba como utilizar esse m\u00e9todo para adicionar elementos existentes,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-08T21:48:46+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"kaue\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/\",\"url\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/\",\"name\":\"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML - Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2023-08-08T21:48:46+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"O m\u00e9todo append() em JavaScript permite adicionar elementos ao HTML de forma din\u00e2mica. Saiba como utilizar esse m\u00e9todo para adicionar elementos existentes,...\",\"breadcrumb\":{\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\",\"width\":1027,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/homolog.fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency.io Brasil\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fluency.io\/br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\",\"name\":\"kaue\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"caption\":\"kaue\"},\"url\":\"https:\/\/homolog.fluency.io\/br\/author\/kaue\/\"}]}<\/script>\n","yoast_head_json":{"title":"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML - Fluency.io Brasil","description":"O m\u00e9todo append() em JavaScript permite adicionar elementos ao HTML de forma din\u00e2mica. Saiba como utilizar esse m\u00e9todo para adicionar elementos existentes,...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML - Fluency.io Brasil","og_description":"O m\u00e9todo append() em JavaScript permite adicionar elementos ao HTML de forma din\u00e2mica. Saiba como utilizar esse m\u00e9todo para adicionar elementos existentes,...","og_url":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/","og_site_name":"Fluency.io Brasil","article_published_time":"2023-08-08T21:48:46+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/","url":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/","name":"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML - Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#primaryimage"},"image":{"@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#primaryimage"},"thumbnailUrl":"","datePublished":"2023-08-08T21:48:46+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"O m\u00e9todo append() em JavaScript permite adicionar elementos ao HTML de forma din\u00e2mica. Saiba como utilizar esse m\u00e9todo para adicionar elementos existentes,...","breadcrumb":{"@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#primaryimage","url":"","contentUrl":"","width":1027,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/fluency.io\/br\/blog\/como-usar-o-metodo-append-em-javascript-para-adicionar-elementos-ao-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/homolog.fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"Como usar o m\u00e9todo append() em JavaScript para adicionar elementos ao HTML"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency.io Brasil","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fluency.io\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a","name":"kaue","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","caption":"kaue"},"url":"https:\/\/homolog.fluency.io\/br\/author\/kaue\/"}]}},"_links":{"self":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/114807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/comments?post=114807"}],"version-history":[{"count":0,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/114807\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/media?parent=114807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/categories?post=114807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/tags?post=114807"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/format?post=114807"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=114807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}