Full code listing<\/strong>
\nAlternatively here a basic code snippet which you can just copy and paste into your your SAP BSP or a HTML file and test this out for yourself.<\/p>\n![\"adddel1\"](\"http:\/\/www.se80.co.uk\/training-education\/wp-content\/uploads\/2014\/07\/adddel1-300x222.png\")
<\/p>\n
<html><\/p>\n
<head>
\n<title>Demonstrate how to add and delete buttons and links<\/title><\/p>\n
<script type=”text\/javascript”>
\nfunction delbutton()
\n{<\/p>\n
var elem = document.getElementById(‘report1’);
\nelem.parentNode.removeChild(elem);<\/p>\n
}<\/p>\n
function addbutton()
\n{<\/p>\n
var addbut = document.createElement(‘input’);
\naddbut.type\u00a0 = “submit”;
\naddbut.value = “Test Button”;
\naddbut.name = “test1”;
\naddbut.id = “report1”;
\naddbut.setAttribute(‘class’, ‘test’);
\ndocument.getElementById(‘button1’).appendChild(addbut);
\n}<\/p>\n
function dellink()
\n{<\/p>\n
var elem = document.getElementById(‘report2’);
\nelem.parentNode.removeChild(elem);<\/p>\n
}<\/p>\n
function addlink()
\n{
\nvar addLink = document.createElement(‘a’);
\nvar linkText = document.createTextNode(“Test link”);
\naddLink.appendChild(linkText);
\naddLink.title = “title”;
\naddLink.href = “#”;
\naddLink.id = “report2″;
\naddLink.setAttribute(‘class’, ‘test’);
\ndocument.getElementById(‘link1’).appendChild(addLink);<\/p>\n
}<\/p>\n
function hideelement() {<\/p>\n
document.getElementById(‘report1’).style.visibility = ‘hidden’;<\/p>\n
}
\nfunction showelement() {<\/p>\n
document.getElementById(‘report1’).style.visibility = ‘visible’;<\/p>\n
}
\n<\/script><\/p>\n
<\/head><\/p>\n
<body>
\n<form id=”sapbspform” name=”sapbspform” method=”post” action=””>
\n<p>
\n<ul><\/p>\n
<li id=”button1″>
\nsome text
\n<input id=”report1″ type=”submit” name=”testbut1″ value=”Test Button” >
\nsome more text
\n<\/li><\/p>\n
<li id=”link1″>
\n<a\u00a0 href=”#” id=”report2″ value=”1″\u00a0 >Test link<\/a>
\n<\/li>
\n<\/ul>
\n<br><br>
\n<a\u00a0 href=”#” onclick=”delbutton();” value=”Del” id=”delbutton” >del button<\/a>
\n<br><a\u00a0 href=”#” onclick=”addbutton();” value=”Add” id=”addbutton” >Add button<\/a><\/p>\n
<br><br><a\u00a0 href=”#” onclick=”dellink();” value=”Del” id=”dellink” >del link<\/a>
\n<br><a\u00a0 href=”#” onclick=”addlink();” value=”Add” id=”addlink” >Add link<\/a><\/p>\n
<br><br><a\u00a0 href=”#” onclick=”hideelement();” value=”Del”>Hide button<\/a>
\n<br><a\u00a0 href=”#” onclick=”showelement();” value=”Add”>Show button<\/a>
\n<\/p>
\n<\/form>
\n<\/body>
\n<\/html><\/p>\n
<\/p>\n
Executing the HTML code<\/strong>
\nWhen you execute the report you will notice the following behaviour:<\/p>\n\n- Clicking the Del button
\n<\/strong>Notice that when the button is deleted the text either side closes together and uses the space where the button used to be. Also note this\u00a0means that once it has been removed you can no longer reference the element within your JavaScript.<\/li>\n<\/ul>\n![\"del\"](\"http:\/\/www.se80.co.uk\/training-education\/wp-content\/uploads\/2014\/07\/del-300x62.png\")
<\/p>\n
\n- Clicking the Hide button
\n<\/strong>When the button is hidden its still takes up the same space but<\/li>\n<\/ul>\n![\"hide\"](\"http:\/\/www.se80.co.uk\/training-education\/wp-content\/uploads\/2014\/07\/hide-300x54.png\")
<\/p>\n
<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Adding and removing HTML elements such as buttons and A href links dynamically is very simple using javascript. If you are bored of reading already feel free to go straight to the end of this article where there is a Below\u00a0is the individual JavScript code for implementing the various methods of doing this either by […]<\/p>\n","protected":false},"author":1,"featured_media":388,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[37],"yoast_head":"\n
Add remove SAP HTML buttons or links using javascript - SAP Help, Training and Education<\/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:\/\/www.se80.co.uk\/training-education\/add-remove-sap-html-buttons-or-links-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add remove SAP HTML buttons or links using javascript - SAP Help, Training and Education\" \/>\n<meta property=\"og:description\" content=\"Adding and removing HTML elements such as buttons and A href links dynamically is very simple using javascript. If you are bored of reading already feel free to go straight to the end of this article where there is a Below\u00a0is the individual JavScript code for implementing the various methods of doing this either by […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.se80.co.uk\/training-education\/add-remove-sap-html-buttons-or-links-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"SAP Help, Training and Education\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-23T15:39:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-07-29T15:04:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.se80.co.uk\/training-education\/wp-content\/uploads\/2014\/07\/hide.png\" \/>\n\t<meta property=\"og:image:width\" content=\"355\" \/>\n\t<meta property=\"og:image:height\" content=\"64\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"se80\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"se80\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/add-remove-sap-html-buttons-or-links-using-javascript\/\",\"url\":\"https:\/\/www.se80.co.uk\/training-education\/add-remove-sap-html-buttons-or-links-using-javascript\/\",\"name\":\"Add remove SAP HTML buttons or links using javascript - SAP Help, Training and Education\",\"isPartOf\":{\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#website\"},\"datePublished\":\"2014-07-23T15:39:00+00:00\",\"dateModified\":\"2014-07-29T15:04:07+00:00\",\"author\":{\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/ddc6a049c1b0790f62d70278be75e511\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/add-remove-sap-html-buttons-or-links-using-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.se80.co.uk\/training-education\/add-remove-sap-html-buttons-or-links-using-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/add-remove-sap-html-buttons-or-links-using-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.se80.co.uk\/training-education\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add remove SAP HTML buttons or links using javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#website\",\"url\":\"https:\/\/www.se80.co.uk\/training-education\/\",\"name\":\"SAP Help, Training and Education\",\"description\":\"Learn SAP\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.se80.co.uk\/training-education\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/ddc6a049c1b0790f62d70278be75e511\",\"name\":\"se80\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3fd4e388f05bf3c763e46cd1f77afeb2?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3fd4e388f05bf3c763e46cd1f77afeb2?s=96&d=retro&r=g\",\"caption\":\"se80\"},\"url\":\"https:\/\/www.se80.co.uk\/training-education\/author\/se80\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add remove SAP HTML buttons or links using javascript - SAP Help, Training and Education","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.se80.co.uk\/training-education\/add-remove-sap-html-buttons-or-links-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Add remove SAP HTML buttons or links using javascript - SAP Help, Training and Education","og_description":"Adding and removing HTML elements such as buttons and A href links dynamically is very simple using javascript. If you are bored of reading already feel free to go straight to the end of this article where there is a Below\u00a0is the individual JavScript code for implementing the various methods of doing this either by […]","og_url":"https:\/\/www.se80.co.uk\/training-education\/add-remove-sap-html-buttons-or-links-using-javascript\/","og_site_name":"SAP Help, Training and Education","article_published_time":"2014-07-23T15:39:00+00:00","article_modified_time":"2014-07-29T15:04:07+00:00","og_image":[{"width":355,"height":64,"url":"https:\/\/www.se80.co.uk\/training-education\/wp-content\/uploads\/2014\/07\/hide.png","type":"image\/png"}],"author":"se80","twitter_card":"summary_large_image","twitter_misc":{"Written by":"se80","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.se80.co.uk\/training-education\/add-remove-sap-html-buttons-or-links-using-javascript\/","url":"https:\/\/www.se80.co.uk\/training-education\/add-remove-sap-html-buttons-or-links-using-javascript\/","name":"Add remove SAP HTML buttons or links using javascript - SAP Help, Training and Education","isPartOf":{"@id":"https:\/\/www.se80.co.uk\/training-education\/#website"},"datePublished":"2014-07-23T15:39:00+00:00","dateModified":"2014-07-29T15:04:07+00:00","author":{"@id":"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/ddc6a049c1b0790f62d70278be75e511"},"breadcrumb":{"@id":"https:\/\/www.se80.co.uk\/training-education\/add-remove-sap-html-buttons-or-links-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.se80.co.uk\/training-education\/add-remove-sap-html-buttons-or-links-using-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.se80.co.uk\/training-education\/add-remove-sap-html-buttons-or-links-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.se80.co.uk\/training-education\/"},{"@type":"ListItem","position":2,"name":"Add remove SAP HTML buttons or links using javascript"}]},{"@type":"WebSite","@id":"https:\/\/www.se80.co.uk\/training-education\/#website","url":"https:\/\/www.se80.co.uk\/training-education\/","name":"SAP Help, Training and Education","description":"Learn SAP","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.se80.co.uk\/training-education\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/ddc6a049c1b0790f62d70278be75e511","name":"se80","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3fd4e388f05bf3c763e46cd1f77afeb2?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3fd4e388f05bf3c763e46cd1f77afeb2?s=96&d=retro&r=g","caption":"se80"},"url":"https:\/\/www.se80.co.uk\/training-education\/author\/se80\/"}]}},"jetpack_featured_media_url":"https:\/\/www.se80.co.uk\/training-education\/wp-content\/uploads\/2014\/07\/hide.png","_links":{"self":[{"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/posts\/386"}],"collection":[{"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/comments?post=386"}],"version-history":[{"count":7,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/posts\/386\/revisions"}],"predecessor-version":[{"id":403,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/posts\/386\/revisions\/403"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/media\/388"}],"wp:attachment":[{"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/media?parent=386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/categories?post=386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/tags?post=386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}