{"id":4604,"date":"2022-07-02T09:12:56","date_gmt":"2022-07-02T01:12:56","guid":{"rendered":"https:\/\/pdfjs.libertynlp.com\/?p=4604"},"modified":"2022-07-02T09:54:57","modified_gmt":"2022-07-02T01:54:57","slug":"how-to-manipulate-html-elements-with-pure-javascript","status":"publish","type":"post","link":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/","title":{"rendered":"How to manipulate HTML elements with pure Javascript?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4604\" class=\"elementor elementor-4604\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fd02168 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"fd02168\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-76658d0\" data-id=\"76658d0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e115836 elementor-widget elementor-widget-text-editor\" data-id=\"e115836\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.5.5 - 03-02-2022 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p style=\"text-align: left;\">After getting HTML elements, we may need to use Javascript to manipulate. This post will introduce: <span style=\"color: #000000;\"><em><strong>\u2460 How to listen element events? \u2461 How to add or delete child elements? \u2462 How to change element attributes?<\/strong><\/em><\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eea38b5 elementor-widget elementor-widget-text-editor\" data-id=\"eea38b5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><em><strong>Keywords:<\/strong><\/em> HTML elements, Javascript , listen events , add , delete , attributes.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3a2b26b elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"3a2b26b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f673f8b\" data-id=\"f673f8b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0e32a16 elementor-widget elementor-widget-heading\" data-id=\"0e32a16\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.5.5 - 03-02-2022 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">Listen events<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a465a39 elementor-widget elementor-widget-text-editor\" data-id=\"a465a39\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>We often need to listen to some events of the element to trigger further processing. Usually need to listen : <em><strong><span style=\"color: #3366ff;\">mousedowm, mouseup, mouseover, mouseout<\/span><\/strong><\/em> and <em><strong><span style=\"color: #3366ff;\">change<\/span><\/strong><strong><span style=\"color: #3366ff;\">.<\/span><\/strong><\/em> The following case is for these events, other events are similar, as long as you know the event name, you can replace the corresponding event name.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-30d2727 elementor-widget elementor-widget-heading\" data-id=\"30d2727\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">listen mouse events<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d6ed3e9 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"d6ed3e9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fd87b79\" data-id=\"fd87b79\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fddad9a elementor-widget elementor-widget-heading\" data-id=\"fddad9a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Create elements<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2b06765 elementor-widget elementor-widget-text-editor\" data-id=\"2b06765\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>To create an element, you can use the <em><strong><span style=\"color: #3366ff;\">document.createElement()<\/span><\/strong><\/em> method, but this method cannot use <em><strong><span style=\"color: #3366ff;\">this<\/span><\/strong><\/em> as a parameter when assigning a value to the element click event. In this case, you can use the string method to create the element.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8410342 elementor-widget elementor-widget-heading\" data-id=\"8410342\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">create elements by string<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-371b5ea elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"371b5ea\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bf9b01f\" data-id=\"bf9b01f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0265ff1 elementor-widget elementor-widget-heading\" data-id=\"0265ff1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add\/Delete elements<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5d3f6d elementor-widget elementor-widget-text-editor\" data-id=\"d5d3f6d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>If you want to add or delete elements, you need to get the corresponding node then manipulate it.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7317193 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"7317193\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d631b9b\" data-id=\"d631b9b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a93f941 elementor-widget elementor-widget-heading\" data-id=\"a93f941\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Change attributes<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5e30524 elementor-widget elementor-widget-text-editor\" data-id=\"5e30524\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>To set an element attribute use the <em><strong><span style=\"color: #3366ff;\">setAttribute()<\/span><\/strong><\/em> method and to remove an attribute use the <em><strong><span style=\"color: #3366ff;\">removeAttribute()<\/span> <\/strong><\/em>method. Among attributes, <em><strong><span style=\"color: #3366ff;\">hidden<\/span><\/strong><\/em> is a special one. If you want to hide the element, you can set the <em><strong><span style=\"color: #3366ff;\">hidden<\/span> <\/strong><\/em>attribute of the element to <em><strong><span style=\"color: #3366ff;\">true<\/span><\/strong><\/em>, but if you want show the element, you need to remove the <em><strong><span style=\"color: #3366ff;\">hidden<\/span> <\/strong><\/em>attribute rather than set <em><strong><span style=\"color: #3366ff;\">hidden<\/span> <\/strong><\/em>to <em><strong><span style=\"color: #3366ff;\">false<\/span><\/strong><\/em>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-093fc0b elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"093fc0b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b6fc912\" data-id=\"b6fc912\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c75e2cc elementor-widget elementor-widget-text-editor\" data-id=\"c75e2cc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong><span style=\"color: #ff9900;\">Javascript<\/span> <\/strong>has a lot of element manipulate methods. This post mainly introduces how to use <span style=\"color: #3366ff;\"><em><strong>addEventListener()<\/strong><\/em><\/span> to listen events, how to use <em><strong><span style=\"color: #3366ff;\">document.createElement()<\/span><\/strong><\/em> to create functions and use <em><strong><span style=\"color: #3366ff;\">this<\/span> <\/strong><\/em>as a parameter, and how to use <em><strong><span style=\"color: #3366ff;\">appendChild() <\/span><\/strong><\/em><span style=\"color: #3366ff;\"><span style=\"color: #000000;\">and<\/span><\/span><em><strong><span style=\"color: #3366ff;\"> insertBefore()<\/span><\/strong><\/em> to add children elements, and finally describes how to add and remove attributes through <em><strong><span style=\"color: #3366ff;\">setAttribute() <\/span><\/strong><\/em><span style=\"color: #3366ff;\"><span style=\"color: #000000;\">and <\/span><\/span><em><strong><span style=\"color: #3366ff;\">removeAttribute().<\/span><\/strong><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f10dcaa elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"f10dcaa\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-64688eb\" data-id=\"64688eb\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6e31acb elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"6e31acb\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d27cb00\" data-id=\"d27cb00\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ddcd323 elementor-widget elementor-widget-wpr-elementor-template\" data-id=\"ddcd323\" data-element_type=\"widget\" data-widget_type=\"wpr-elementor-template.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style><\/style>\t\t<div data-elementor-type=\"section\" data-elementor-id=\"4111\" class=\"elementor elementor-4111\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3426c7a2 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"3426c7a2\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1de62ff4\" data-id=\"1de62ff4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<span class=\"wpr-template-edit-btn\" data-permalink=\"https:\/\/pdfjs.libertynlp.com\/?elementor_library=ariticle-footer\">Edit Template<\/span>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>After getting HTML elements, we may need to use Javascript to manipulate. This post will introduce: \u2460 How to listen element events? \u2461 How to add or delete child elements? \u2462 How to change element attributes?<\/p>\n","protected":false},"author":1,"featured_media":4668,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4604","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to manipulate HTML elements with pure Javascript? - pdf.js annotation library for everyone!<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to manipulate HTML elements with pure Javascript? - pdf.js annotation library for everyone!\" \/>\n<meta property=\"og:description\" content=\"After getting HTML elements, we may need to use Javascript to manipulate. This post will introduce: \u2460 How to listen element events? \u2461 How to add or delete child elements? \u2462 How to change element attributes?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"pdf.js annotation library for everyone!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100083516062282\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100083516062282\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-02T01:12:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-02T01:54:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/07\/POST16.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1123\" \/>\n\t<meta property=\"og:image:height\" content=\"1123\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Chaoxu Wei\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Chaoxu Wei\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#website\",\"url\":\"https:\/\/pdfjs.libertynlp.com\/\",\"name\":\"pdf.js annotation library for everyone!\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pdfjs.libertynlp.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/\",\"url\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/\",\"name\":\"How to manipulate HTML elements with pure Javascript? - pdf.js annotation library for everyone!\",\"isPartOf\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#website\"},\"datePublished\":\"2022-07-02T01:12:56+00:00\",\"dateModified\":\"2022-07-02T01:54:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/pdfjs.libertynlp.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to manipulate HTML elements with pure Javascript?\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/\"},\"author\":{\"name\":\"Chaoxu Wei\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\"},\"headline\":\"How to manipulate HTML elements with pure Javascript?\",\"datePublished\":\"2022-07-02T01:12:56+00:00\",\"dateModified\":\"2022-07-02T01:54:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/\"},\"wordCount\":326,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/#respond\"]}]},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\",\"name\":\"Chaoxu Wei\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg\",\"contentUrl\":\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg\",\"width\":2297,\"height\":2297,\"caption\":\"Chaoxu Wei\"},\"logo\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/\"},\"description\":\"Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me weichaoxu1998@gmail.com, thank you very much!\",\"sameAs\":[\"https:\/\/pdfjs.libertynlp.com\",\"https:\/\/www.facebook.com\/profile.php?id=100083516062282\",\"https:\/\/www.youtube.com\/channel\/UC1-am0MOM52n2HVeoLlWWxA\"],\"url\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/author\/weichaoxu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to manipulate HTML elements with pure Javascript? - pdf.js annotation library for everyone!","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:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to manipulate HTML elements with pure Javascript? - pdf.js annotation library for everyone!","og_description":"After getting HTML elements, we may need to use Javascript to manipulate. This post will introduce: \u2460 How to listen element events? \u2461 How to add or delete child elements? \u2462 How to change element attributes?","og_url":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/","og_site_name":"pdf.js annotation library for everyone!","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100083516062282","article_author":"https:\/\/www.facebook.com\/profile.php?id=100083516062282","article_published_time":"2022-07-02T01:12:56+00:00","article_modified_time":"2022-07-02T01:54:57+00:00","og_image":[{"width":1123,"height":1123,"url":"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/07\/POST16.jpg","type":"image\/jpeg"}],"author":"Chaoxu Wei","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Chaoxu Wei","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/pdfjs.libertynlp.com\/#website","url":"https:\/\/pdfjs.libertynlp.com\/","name":"pdf.js annotation library for everyone!","description":"","publisher":{"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pdfjs.libertynlp.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/","url":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/","name":"How to manipulate HTML elements with pure Javascript? - pdf.js annotation library for everyone!","isPartOf":{"@id":"https:\/\/pdfjs.libertynlp.com\/#website"},"datePublished":"2022-07-02T01:12:56+00:00","dateModified":"2022-07-02T01:54:57+00:00","breadcrumb":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/pdfjs.libertynlp.com\/"},{"@type":"ListItem","position":2,"name":"How to manipulate HTML elements with pure Javascript?"}]},{"@type":"Article","@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/#article","isPartOf":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/"},"author":{"name":"Chaoxu Wei","@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032"},"headline":"How to manipulate HTML elements with pure Javascript?","datePublished":"2022-07-02T01:12:56+00:00","dateModified":"2022-07-02T01:54:57+00:00","mainEntityOfPage":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/"},"wordCount":326,"commentCount":0,"publisher":{"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/07\/02\/how-to-manipulate-html-elements-with-pure-javascript\/#respond"]}]},{"@type":["Person","Organization"],"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032","name":"Chaoxu Wei","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/","url":"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg","contentUrl":"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg","width":2297,"height":2297,"caption":"Chaoxu Wei"},"logo":{"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/"},"description":"Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me weichaoxu1998@gmail.com, thank you very much!","sameAs":["https:\/\/pdfjs.libertynlp.com","https:\/\/www.facebook.com\/profile.php?id=100083516062282","https:\/\/www.youtube.com\/channel\/UC1-am0MOM52n2HVeoLlWWxA"],"url":"https:\/\/pdfjs.libertynlp.com\/index.php\/author\/weichaoxu\/"}]}},"_links":{"self":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts\/4604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/comments?post=4604"}],"version-history":[{"count":62,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts\/4604\/revisions"}],"predecessor-version":[{"id":4669,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts\/4604\/revisions\/4669"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/media\/4668"}],"wp:attachment":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/media?parent=4604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/categories?post=4604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/tags?post=4604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}