{"id":4671,"date":"2025-08-09T17:20:54","date_gmt":"2025-08-09T16:20:54","guid":{"rendered":"https:\/\/ibex.tech\/wordpress-sites\/?p=4671"},"modified":"2026-04-16T15:44:38","modified_gmt":"2026-04-16T14:44:38","slug":"alter-textcontent","status":"publish","type":"post","link":"https:\/\/ibex.tech\/wordpress-sites\/page-builders\/elementor\/javascript\/alter-textcontent","title":{"rendered":"Alter .textContent"},"content":{"rendered":"\n<p>Use querySelector to target the &lt;p&gt; directly:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.querySelector('#MyCssId p').textContent = \"Something\";\n\ndocument.querySelector('#MyCssId p').innerHTML= \"Something&lt;span class=\\\"MyClass\\\"&gt;something else&lt;\/span&gt;\";<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">If your innerHTML includes double quotes or newlines<\/h5>\n\n\n\n<p>You can use backticks instead of quotes:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.querySelector('#MyCssId p').innerHTML= `Something&lt;span class=\"MyClass\"&gt;\nsomething else\n&lt;\/span&gt;\n`;<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">Checking if the ID exists<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>const el = document.querySelector('#MyCssId p');\nif (el)\n  el.textContent = \"Something\";<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">If the text you are inserting has special characters, line breaks, etc<\/h4>\n\n\n\n<p>Because you are inserting into javascript, json_encode is the best solution. (Note there are no surrounding quotes, json_encode provides these).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  $ConvertedText = json_encode($MyText);\n  $HtmlOutput .= &lt;&lt;&lt;_END\n    &lt;style&gt;\n      #MyCssId p {\n        white-space: pre-line;\n      }\n    &lt;\/style&gt;\n    &lt;script&gt;\ndocument.querySelector('#MyCssId p').innerHTML= $ConvertedText;\n    &lt;\/script&gt;\n_END;<\/code><\/pre>\n\n\n\n<p>The white-space: pre-line; is needed to ensure line breaks get shown, in elementor you can use this on the target text file custom CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>selector p {\n    white-space: pre-line;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Why document.getElementById(&#8216;MyCssId&#8217;).textContent doesn&#8217;t work<\/h4>\n\n\n\n<p>When you apply an ID to an Elementor widget, it is often applied a level up from the actual displayed text, e.g. for ID=&#8221;MyCssId&#8221; applied to a Text Editor widget:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"elementor-element elementor-element-9c45b00 elementor-widget elementor-widget-text-editor\" data-id=\"9c45b00\" data-element_type=\"widget\" id=\"MyCssId\" data-widget_type=\"text-editor.default\"&gt;\n  &lt;div class=\"elementor-widget-container\"&gt;\n    &lt;p style=\"text-align: center;\"&gt;$##.##&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>If you use this on the ID:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.getElementById('MyCssId').textContent = \"\u00a312.34\";<\/code><\/pre>\n\n\n\n<p>You will remove the &lt;div&gt; and &lt;p&gt; surrounding the target text, resulting in styling being lost. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use querySelector to target the &lt;p&gt; directly: If your innerHTML includes double quotes or newlines You can use backticks instead of quotes: Checking if the ID exists If the text you are inserting has special characters, line breaks, etc Because you are inserting into javascript, json_encode is the best solution. (Note there are no surrounding [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[385],"tags":[],"class_list":["post-4671","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts\/4671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/comments?post=4671"}],"version-history":[{"count":12,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts\/4671\/revisions"}],"predecessor-version":[{"id":4796,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts\/4671\/revisions\/4796"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/media?parent=4671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/categories?post=4671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/tags?post=4671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}