{"id":10932,"date":"2024-03-14T13:01:58","date_gmt":"2024-03-14T13:01:58","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/"},"modified":"2025-08-04T05:38:56","modified_gmt":"2025-08-04T05:38:56","slug":"how-to-use-textcontent-innertext-and-innerhtml-in-javascript","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/","title":{"rendered":"JavaScript textContent vs innerText vs innerHTML Guide"},"content":{"rendered":"

textContent, innerText, and innerHTML are properties used to access and set the content of an element.<\/p>\n

    \n
  1. textContent: textContent returns all the text content of an element, including the text within its child elements. It can be used to retrieve or set the text content of an element.<\/li>\n<\/ol>\n

    Example: <\/p>\n

    I need to study for my exam tomorrow. <\/p>\n

    I have to prepare for my exam that is taking place tomorrow.<\/p>\n

    let<\/span> element = document<\/span>.getElementById<\/span>(\"example\"<\/span>);\r\nconsole<\/span>.log<\/span>(element.textContent<\/span>); \/\/ \u83b7\u53d6\u5143\u7d20\u7684\u6587\u672c\u5185\u5bb9<\/span>\r\nelement.textContent<\/span> = \"\u8fd9\u662f\u65b0\u7684\u6587\u672c\u5185\u5bb9\"<\/span>; \/\/ \u8bbe\u7f6e\u5143\u7d20\u7684\u6587\u672c\u5185\u5bb9<\/span>\r\n<\/code><\/pre>\n
      \n
    1. InnerText returns the visible text content of an element, excluding hidden elements and text styles. It can be used to retrieve or set the visible text content of an element.<\/li>\n<\/ol>\n
      Example: <\/p>\n
      “I have a lot of homework to do tonight.” -> “I have a large amount of homework that needs to be completed tonight.”<\/p>\n
      let<\/span> element = document<\/span>.getElementById<\/span>(\"example\"<\/span>);\r\nconsole<\/span>.log<\/span>(element.innerText<\/span>); \/\/ \u83b7\u53d6\u5143\u7d20\u7684\u53ef\u89c1\u6587\u672c\u5185\u5bb9<\/span>\r\nelement.innerText<\/span> = \"\u8fd9\u662f\u65b0\u7684\u53ef\u89c1\u6587\u672c\u5185\u5bb9\"<\/span>; \/\/ \u8bbe\u7f6e\u5143\u7d20\u7684\u53ef\u89c1\u6587\u672c\u5185\u5bb9<\/span>\r\n<\/code><\/pre>\n
        \n
      1. innerHTML is used to return all of the HTML content of an element, including tags and text. It can be used to retrieve or update the HTML content of an element.<\/li>\n<\/ol>\n
        Example: <\/p>\n
        \u4ed6\u4eec\u53bb\u4e86\u6d77\u8fb9\u6563\u6b65\u3002<\/p>\n
        They went for a walk by the seaside.<\/p>\n
        let<\/span> element = document<\/span>.getElementById<\/span>(\"example\"<\/span>);\r\nconsole<\/span>.log<\/span>(element.innerHTML<\/span>); \/\/ \u83b7\u53d6\u5143\u7d20\u7684HTML\u5185\u5bb9<\/span>\r\nelement.innerHTML<\/span> = \"<p>\u8fd9\u662f\u65b0\u7684HTML\u5185\u5bb9<\/p>\"<\/span>; \/\/ \u8bbe\u7f6e\u5143\u7d20\u7684HTML\u5185\u5bb9<\/span>\r\n<\/code><\/pre>\n
        In summary, textContent is used to get and set the text content of an element, innerText is used to get and set the visible text content of an element, and innerHTML is used to get and set the HTML content of an element. Choose the appropriate property to manipulate the content of elements as needed.<\/p>\n","protected":false},"excerpt":{"rendered":"
        textContent, innerText, and innerHTML are properties used to access and set the content of an element. textContent: textContent returns all the text content of an element, including the text within its child elements. It can be used to retrieve or set the text content of an element. Example: I need to study for my exam […]<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[5638,13865,13864,324,13863],"class_list":["post-10932","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-dom-manipulation","tag-innerhtml","tag-innertext","tag-javascript","tag-textcontent"],"yoast_head":"\nJavaScript textContent vs innerText vs innerHTML Guide - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Master textContent, innerText & innerHTML properties in JavaScript with practical examples and key differences.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript textContent vs innerText vs innerHTML Guide\" \/>\n<meta property=\"og:description\" content=\"Master textContent, innerText & innerHTML properties in JavaScript with practical examples and key differences.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-14T13:01:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-04T05:38:56+00:00\" \/>\n<meta name=\"author\" content=\"Noah Thompson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noah Thompson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/\"},\"author\":{\"name\":\"Noah Thompson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\"},\"headline\":\"JavaScript textContent vs innerText vs innerHTML Guide\",\"datePublished\":\"2024-03-14T13:01:58+00:00\",\"dateModified\":\"2025-08-04T05:38:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/\"},\"wordCount\":224,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"DOM manipulation\",\"innerHTML\",\"innerText\",\"JavaScript\",\"textContent\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/\",\"name\":\"JavaScript textContent vs innerText vs innerHTML Guide - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T13:01:58+00:00\",\"dateModified\":\"2025-08-04T05:38:56+00:00\",\"description\":\"Master textContent, innerText & innerHTML properties in JavaScript with practical examples and key differences.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript textContent vs innerText vs innerHTML Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\",\"name\":\"Noah Thompson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"caption\":\"Noah Thompson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript textContent vs innerText vs innerHTML Guide - Blog - Silicon Cloud","description":"Master textContent, innerText & innerHTML properties in JavaScript with practical examples and key differences.","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:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript textContent vs innerText vs innerHTML Guide","og_description":"Master textContent, innerText & innerHTML properties in JavaScript with practical examples and key differences.","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T13:01:58+00:00","article_modified_time":"2025-08-04T05:38:56+00:00","author":"Noah Thompson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Noah Thompson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/"},"author":{"name":"Noah Thompson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a"},"headline":"JavaScript textContent vs innerText vs innerHTML Guide","datePublished":"2024-03-14T13:01:58+00:00","dateModified":"2025-08-04T05:38:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/"},"wordCount":224,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["DOM manipulation","innerHTML","innerText","JavaScript","textContent"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/","name":"JavaScript textContent vs innerText vs innerHTML Guide - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T13:01:58+00:00","dateModified":"2025-08-04T05:38:56+00:00","description":"Master textContent, innerText & innerHTML properties in JavaScript with practical examples and key differences.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-textcontent-innertext-and-innerhtml-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript textContent vs innerText vs innerHTML Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a","name":"Noah Thompson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","caption":"Noah Thompson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/10932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=10932"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/10932\/revisions"}],"predecessor-version":[{"id":154699,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/10932\/revisions\/154699"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=10932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=10932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=10932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}