{"id":617,"date":"2012-09-28T16:10:02","date_gmt":"2012-09-28T16:10:02","guid":{"rendered":"https:\/\/ibex.tech\/javascript\/?p=617"},"modified":"2026-04-16T15:45:10","modified_gmt":"2026-04-16T14:45:10","slug":"changing-the-contents-within-div-tags","status":"publish","type":"post","link":"https:\/\/ibex.tech\/javascript\/manipulating-html\/changing-the-contents-within-div-tags","title":{"rendered":"Changing the contents of html elements"},"content":{"rendered":"\n

Element types?<\/h4>\n\n\n\n

Can be anything, so <div id=”, <span id=”, <p id=”, etc<\/p>\n\n\n\n

N.B. You need to place the <script> after the HTML element, or call it within say window.onload = function() (the div or whatever tag you’ve used must be before the javascript on the page)<\/strong><\/em><\/p>\n\n\n\n

In your html<\/h5>\n\n\n\n
<div id=\"my_target_div\"><\/div><\/code><\/pre>\n\n\n\n
To manipulate text within a block of text you could you span instead of div<\/p>\n\n\n\n
In your javascript – Referencing by ID Name<\/h5>\n\n\n\n
document.getElementById('MyTargetIdName').innerHTML = \"<p>Hello<\/p>\";\n\n\/\/or\n\n<script>document.getElementById('MyTargetIdName').innerHTML = \"<p>Hello<\/p>\";<\/script><\/code><\/pre>\n\n\n\n
In your javascript – Referencing by Class Name<\/h5>\n\n\n\n
document.getElementsByClassName('MyTargetClassName')[0].style.visibility = \"visible\" ;\n\/\/When you getElementsByClassName an array is retutrned, because there can be more than one element using the same class.<\/code><\/pre>\n\n\n\n
If the text you are inserting has special characters, line breaks, etc<\/h4>\n\n\n\n
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
  $ConvertedText = json_encode($MyText);\n  $HtmlOutput .= <<<_END\n    <style>\n      #MyCssId p {\n        white-space: pre-line;\n      }\n    <\/style>\n    <script>\ndocument.querySelector('#MyCssId p').innerHTML= $ConvertedText;\n    <\/script>\n_END;<\/code><\/pre>\n\n\n\n
If using jquery<\/h5>\n\n\n\n
$(\"#my_target_div\").html(\"<p>Hello<\/p>\"); <\/code><\/p>\n\n\n\n
Note that this will overwrite if you already have content between the div tags<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Element types? Can be anything, so <div id=”, <span id=”, <p id=”, etc N.B. You need to place the <script> after the HTML element, or call it within say window.onload = function() (the div or whatever tag you’ve used must be before the javascript on the page) In your html To manipulate text within a […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[99,74],"tags":[],"class_list":["post-617","post","type-post","status-publish","format-standard","hentry","category-elements","category-manipulating-html"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/comments?post=617"}],"version-history":[{"count":14,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/617\/revisions"}],"predecessor-version":[{"id":4437,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/617\/revisions\/4437"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}