First, create a Javascript file that we will call “lorem.js”. Copy\/paste the following code into that file.<\/p>\n
\n\/\/ Lorem ipsum generator\n\/\/ @author C. Peter Chen of http:\/\/dev-notes.com\n\/\/ @date 20080812\nfunction loremIpsum(elem) {\n\tvar loremIpsumWordBank = new Array(\"lorem\",\"ipsum\",\"dolor\",\"sit\",\"amet,\",\"consectetur\",\"adipisicing\",\"elit,\",\"sed\",\"do\",\"eiusmod\",\"tempor\",\"incididunt\",\"ut\",\"labore\",\"et\",\"dolore\",\"magna\",\"aliqua.\",\"enim\",\"ad\",\"minim\",\"veniam,\",\"quis\",\"nostrud\",\"exercitation\",\"ullamco\",\"laboris\",\"nisi\",\"ut\",\"aliquip\",\"ex\",\"ea\",\"commodo\",\"consequat.\",\"duis\",\"aute\",\"irure\",\"dolor\",\"in\",\"reprehenderit\",\"in\",\"voluptate\",\"velit\",\"esse\",\"cillum\",\"dolore\",\"eu\",\"fugiat\",\"nulla\",\"pariatur.\",\"excepteur\",\"sint\",\"occaecat\",\"cupidatat\",\"non\",\"proident,\",\"sunt\",\"in\",\"culpa\",\"qui\",\"officia\",\"deserunt\",\"mollit\",\"anim\",\"id\",\"est\",\"laborum.\",\"sed\",\"ut\",\"perspiciatis,\",\"unde\",\"omnis\",\"iste\",\"natus\",\"error\",\"sit\",\"voluptatem\",\"accusantium\",\"doloremque\",\"laudantium,\",\"totam\",\"rem\",\"aperiam\",\"eaque\",\"ipsa,\",\"quae\",\"ab\",\"illo\",\"inventore\",\"veritatis\",\"et\",\"quasi\",\"architecto\",\"beatae\",\"vitae\",\"dicta\",\"sunt,\",\"explicabo.\",\"nemo\",\"enim\",\"ipsam\",\"voluptatem,\",\"quia\",\"voluptas\",\"sit,\",\"aspernatur\",\"aut\",\"odit\",\"aut\",\"fugit,\",\"sed\",\"quia\",\"consequuntur\",\"magni\",\"dolores\",\"eos,\",\"qui\",\"ratione\",\"voluptatem\",\"sequi\",\"nesciunt,\",\"neque\",\"porro\",\"quisquam\",\"est,\",\"qui\",\"dolorem\",\"ipsum,\",\"quia\",\"dolor\",\"sit,\",\"amet,\",\"consectetur,\",\"adipisci\",\"velit,\",\"sed\",\"quia\",\"non\",\"numquam\",\"eius\",\"modi\",\"tempora\",\"incidunt,\",\"ut\",\"labore\",\"et\",\"dolore\",\"magnam\",\"aliquam\",\"quaerat\",\"voluptatem.\",\"ut\",\"enim\",\"ad\",\"minima\",\"veniam,\",\"quis\",\"nostrum\",\"exercitationem\",\"ullam\",\"corporis\",\"suscipit\",\"laboriosam,\",\"nisi\",\"ut\",\"aliquid\",\"ex\",\"ea\",\"commodi\",\"consequatur?\",\"quis\",\"autem\",\"vel\",\"eum\",\"iure\",\"reprehenderit,\",\"qui\",\"in\",\"ea\",\"voluptate\",\"velit\",\"esse,\",\"quam\",\"nihil\",\"molestiae\",\"consequatur,\",\"vel\",\"illum,\",\"qui\",\"dolorem\",\"eum\",\"fugiat,\",\"quo\",\"voluptas\",\"nulla\",\"pariatur?\",\"at\",\"vero\",\"eos\",\"et\",\"accusamus\",\"et\",\"iusto\",\"odio\",\"dignissimos\",\"ducimus,\",\"qui\",\"blanditiis\",\"praesentium\",\"voluptatum\",\"deleniti\",\"atque\",\"corrupti,\",\"quos\",\"dolores\",\"et\",\"quas\",\"molestias\",\"excepturi\",\"sint,\",\"obcaecati\",\"cupiditate\",\"non\",\"provident,\",\"similique\",\"sunt\",\"in\",\"culpa,\",\"qui\",\"officia\",\"deserunt\",\"mollitia\",\"animi,\",\"id\",\"est\",\"laborum\",\"et\",\"dolorum\",\"fuga.\",\"harum\",\"quidem\",\"rerum\",\"facilis\",\"est\",\"et\",\"expedita\",\"distinctio.\",\"Nam\",\"libero\",\"tempore,\",\"cum\",\"soluta\",\"nobis\",\"est\",\"eligendi\",\"optio,\",\"cumque\",\"nihil\",\"impedit,\",\"quo\",\"minus\",\"id,\",\"quod\",\"maxime\",\"placeat,\",\"facere\",\"possimus,\",\"omnis\",\"voluptas\",\"assumenda\",\"est,\",\"omnis\",\"dolor\",\"repellendus.\",\"temporibus\",\"autem\",\"quibusdam\",\"aut\",\"officiis\",\"debitis\",\"aut\",\"rerum\",\"necessitatibus\",\"saepe\",\"eveniet,\",\"ut\",\"et\",\"voluptates\",\"repudiandae\",\"sint\",\"molestiae\",\"non\",\"recusandae.\",\"itaque\",\"earum\",\"rerum\",\"hic\",\"tenetur\",\"a\",\"sapiente\",\"delectus,\",\"aut\",\"reiciendis\",\"voluptatibus\",\"maiores\",\"alias\",\"consequatur\",\"aut\",\"perferendis\",\"doloribus\",\"asperiores\",\"repellat\");\n\tvar minWordCount = 15;\n\tvar maxWordCount = 100;\n\n\tvar randy = Math.floor(Math.random()*(maxWordCount - minWordCount)) + minWordCount;\n\tvar ret = \"\";\n\tfor(i = 0; i < randy; i++) {\n\t\tvar newTxt = loremIpsumWordBank[Math.floor(Math.random() * (loremIpsumWordBank.length - 1))];\n\t\tif (ret.substring(ret.length-1,ret.length) == \".\" || ret.substring(ret.length-1,ret.length) == \"?\") {\n\t\t\tnewTxt = newTxt.substring(0,1).toUpperCase() + newTxt.substring(1, newTxt.length);\n\t\t}\n\t\tret += \" \" + newTxt;\n\t}\n\tdocument.getElementById(elem).innerHTML = document.getElementById(elem).innerHTML + \"<p>Lorem ipsum \" + ret.substring(0,ret.length-1) + \".<\/p>\";\n}\n<\/xmp><\/pre>\n<p>Next, in your HTML page, include the Javascript file as follows.<\/p>\n<pre class=\"code\"><xmp>\n<script type=\"text\/javascript\" src=\"lorem.js\"><\/script>\n<\/xmp><\/pre>\n<p>To populate some random text, call the Javascript function “loremIpsum(‘elementName’)”, where “elementName” is the ID of an element you wish to populate the text to. The following code illustrate how we can use this function to populate automatic lorem ipsum text into a DIV.<\/p>\n<pre class=\"code\"><xmp>\n<html>\n<head>\n<script type=\"text\/javascript\" src=\"lorem.js\"><\/script>\n<\/head>\n<body>\n\n<p><b>Lorem Ipsum generator<\/b><br \/>\nWritten by C. Peter Chen of <a href=\"http:\/\/dev-notes.com\">dev-notes.com<\/a><\/p>\n\n<div id=\"div1\">\n<\/div>\n\n<input type=\"button\" onclick=\"loremIpsum('div1');\" value=\"Add Text\">\n\n<\/body>\n<\/html>\n<\/xmp><\/pre>\n<p>Finally, the following section is a live demo of how the code should behave.<\/p>\n<p><script type=\"text\/javascript\">\n\/\/ Lorem ipsum generator\n\/\/ @author C. Peter Chen of http:\/\/dev-notes.com\n\/\/ @date 20080812\nfunction loremIpsum(elem) {\n\tvar loremIpsumWordBank = new Array(\"lorem\",\"ipsum\",\"dolor\",\"sit\",\"amet,\",\"consectetur\",\"adipisicing\",\"elit,\",\"sed\",\"do\",\"eiusmod\",\"tempor\",\"incididunt\",\"ut\",\"labore\",\"et\",\"dolore\",\"magna\",\"aliqua.\",\"enim\",\"ad\",\"minim\",\"veniam,\",\"quis\",\"nostrud\",\"exercitation\",\"ullamco\",\"laboris\",\"nisi\",\"ut\",\"aliquip\",\"ex\",\"ea\",\"commodo\",\"consequat.\",\"duis\",\"aute\",\"irure\",\"dolor\",\"in\",\"reprehenderit\",\"in\",\"voluptate\",\"velit\",\"esse\",\"cillum\",\"dolore\",\"eu\",\"fugiat\",\"nulla\",\"pariatur.\",\"excepteur\",\"sint\",\"occaecat\",\"cupidatat\",\"non\",\"proident,\",\"sunt\",\"in\",\"culpa\",\"qui\",\"officia\",\"deserunt\",\"mollit\",\"anim\",\"id\",\"est\",\"laborum.\",\"sed\",\"ut\",\"perspiciatis,\",\"unde\",\"omnis\",\"iste\",\"natus\",\"error\",\"sit\",\"voluptatem\",\"accusantium\",\"doloremque\",\"laudantium,\",\"totam\",\"rem\",\"aperiam\",\"eaque\",\"ipsa,\",\"quae\",\"ab\",\"illo\",\"inventore\",\"veritatis\",\"et\",\"quasi\",\"architecto\",\"beatae\",\"vitae\",\"dicta\",\"sunt,\",\"explicabo.\",\"nemo\",\"enim\",\"ipsam\",\"voluptatem,\",\"quia\",\"voluptas\",\"sit,\",\"aspernatur\",\"aut\",\"odit\",\"aut\",\"fugit,\",\"sed\",\"quia\",\"consequuntur\",\"magni\",\"dolores\",\"eos,\",\"qui\",\"ratione\",\"voluptatem\",\"sequi\",\"nesciunt,\",\"neque\",\"porro\",\"quisquam\",\"est,\",\"qui\",\"dolorem\",\"ipsum,\",\"quia\",\"dolor\",\"sit,\",\"amet,\",\"consectetur,\",\"adipisci\",\"velit,\",\"sed\",\"quia\",\"non\",\"numquam\",\"eius\",\"modi\",\"tempora\",\"incidunt,\",\"ut\",\"labore\",\"et\",\"dolore\",\"magnam\",\"aliquam\",\"quaerat\",\"voluptatem.\",\"ut\",\"enim\",\"ad\",\"minima\",\"veniam,\",\"quis\",\"nostrum\",\"exercitationem\",\"ullam\",\"corporis\",\"suscipit\",\"laboriosam,\",\"nisi\",\"ut\",\"aliquid\",\"ex\",\"ea\",\"commodi\",\"consequatur?\",\"quis\",\"autem\",\"vel\",\"eum\",\"iure\",\"reprehenderit,\",\"qui\",\"in\",\"ea\",\"voluptate\",\"velit\",\"esse,\",\"quam\",\"nihil\",\"molestiae\",\"consequatur,\",\"vel\",\"illum,\",\"qui\",\"dolorem\",\"eum\",\"fugiat,\",\"quo\",\"voluptas\",\"nulla\",\"pariatur?\",\"at\",\"vero\",\"eos\",\"et\",\"accusamus\",\"et\",\"iusto\",\"odio\",\"dignissimos\",\"ducimus,\",\"qui\",\"blanditiis\",\"praesentium\",\"voluptatum\",\"deleniti\",\"atque\",\"corrupti,\",\"quos\",\"dolores\",\"et\",\"quas\",\"molestias\",\"excepturi\",\"sint,\",\"obcaecati\",\"cupiditate\",\"non\",\"provident,\",\"similique\",\"sunt\",\"in\",\"culpa,\",\"qui\",\"officia\",\"deserunt\",\"mollitia\",\"animi,\",\"id\",\"est\",\"laborum\",\"et\",\"dolorum\",\"fuga.\",\"harum\",\"quidem\",\"rerum\",\"facilis\",\"est\",\"et\",\"expedita\",\"distinctio.\",\"Nam\",\"libero\",\"tempore,\",\"cum\",\"soluta\",\"nobis\",\"est\",\"eligendi\",\"optio,\",\"cumque\",\"nihil\",\"impedit,\",\"quo\",\"minus\",\"id,\",\"quod\",\"maxime\",\"placeat,\",\"facere\",\"possimus,\",\"omnis\",\"voluptas\",\"assumenda\",\"est,\",\"omnis\",\"dolor\",\"repellendus.\",\"temporibus\",\"autem\",\"quibusdam\",\"aut\",\"officiis\",\"debitis\",\"aut\",\"rerum\",\"necessitatibus\",\"saepe\",\"eveniet,\",\"ut\",\"et\",\"voluptates\",\"repudiandae\",\"sint\",\"molestiae\",\"non\",\"recusandae.\",\"itaque\",\"earum\",\"rerum\",\"hic\",\"tenetur\",\"a\",\"sapiente\",\"delectus,\",\"aut\",\"reiciendis\",\"voluptatibus\",\"maiores\",\"alias\",\"consequatur\",\"aut\",\"perferendis\",\"doloribus\",\"asperiores\",\"repellat\");\n\tvar minWordCount = 15;\n\tvar maxWordCount = 100;<\/p>\n<p>\tvar randy = Math.floor(Math.random()*(maxWordCount - minWordCount)) + minWordCount;\n\tvar ret = \"\";\n\tfor(i = 0; i < randy; i++) {\n\t\tvar newTxt = loremIpsumWordBank[Math.floor(Math.random() * (loremIpsumWordBank.length - 1))];\n\t\tif (ret.substring(ret.length-1,ret.length) == \".\" || ret.substring(ret.length-1,ret.length) == \"?\") {\n\t\t\tnewTxt = newTxt.substring(0,1).toUpperCase() + newTxt.substring(1, newTxt.length);\n\t\t}\n\t\tret += \" \" + newTxt;\n\t}\n\tdocument.getElementById(elem).innerHTML = document.getElementById(elem).innerHTML + \"\n\n<p>Lorem ipsum \" + ret.substring(0,ret.length-1) + \".<\/p>\n<p>\";\n}\n<\/script><\/p>\n<p class=\"code\" id=\"demo1\">\n<input type=\"button\" onclick=\"loremIpsum('demo1');\" value=\"Add Text\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When developing the layout for a website, we may need to put some placeholder text so we can get a sense of what a page may look like. This Javascript function can be used to dynamically generate some random text to help you in this aspect.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-83","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts\/83","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":0,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts\/83\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/media?parent=83"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/categories?post=83"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/tags?post=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}