When creating your SAP BSP using HTML you may want to add and remove\u00a0elements dynamically using JavaScript and\u00a0sometimes simply setting\u00a0the\u00a0element to visible or not isn’t the solution you are after. Sometimes\u00a0I have found that\u00a0even though\u00a0an element has been\u00a0set to hidden its footprint is still left behind and interferes with the alignment of other fields. Yes you could maybe change the structure\/style of your HTML code so this does not happen but it is possible to use JavaScript to add and remove elements as\u00a0and when\u00a0your require.<\/p>\n
<\/p>\n
Original HTML code var\u00a0delbutton\u00a0=\u00a0document.getElementById(‘myBackLink’); <\/p>\n Add HTML elements <\/p>\n Re-adding Link (a href) back to your HTML page using \u00a0javascript<\/strong> <\/p>\n Also here is the code required to add an input button instead of a link(a href)<\/strong> <\/p>\n","protected":false},"excerpt":{"rendered":" When creating your SAP BSP using HTML you may want to add and remove\u00a0elements dynamically using JavaScript and\u00a0sometimes simply setting\u00a0the\u00a0element to visible or not isn’t the solution you are after. Sometimes\u00a0I have found that\u00a0even though\u00a0an element has been\u00a0set to hidden its footprint is still left behind and interferes with the alignment of other fields. Yes […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[22,16],"tags":[23,24],"yoast_head":"\n
\n<\/strong><li\u00a0id=”backButton”>
\n<a\u00a0id=”mybackLink” href=”?OnInputProcessing(goback)”\u00a0class=”myButton”\u00a0\u00a0>Back\u00a0to previous<\/a>
\n<\/li><\/p>\n
\nRemove HTML elements
\n<\/strong>Removing an element is easy simply use the following JavaScript code:<\/p>\n
\ndelbutton.parentNode.removeChild(delbutton);<\/p>\n
\n<\/strong>This is a little more tricky as you need to manually re-build the element again. I say tricky, it just needs a few more lines of code which you can copy and paste from below. Please note that there are other, maybe better ways to do this. This is just the method used after much Google searching. It will at least give you a start\u00a0especially if your background is SAP and you are just getting into the world of JavaScript\/HTML etc.<\/p>\n
\nvar\u00a0addLink\u00a0=\u00a0document.createElement(‘a’);
\nvar\u00a0linkText\u00a0=\u00a0document.createTextNode(“Back\u00a0to Index”);
\naddLink.appendChild(linkText);
\naddLink.title\u00a0=\u00a0“title”;
\naddLink.href\u00a0=\u00a0“index.htm”;
\naddLink.id\u00a0=\u00a0“mybackLink”;
\naddLink.setAttribute(‘class’,\u00a0‘myButton’);
\ndocument.getElementById(‘backButton’).appendChild(addLink);<\/p>\n
\nvar addbut = document.createElement(\u2018input\u2019);<\/span>
addbut.type\u00a0 = \u201csubmit\u201d;<\/span>
addbut.value = \u201cBack to previous\u201d;<\/span>
addbut.name = \u201cbackbut\u2033;<\/span>
addbut.id = \u201cmybackButton\u2033;<\/span>
addbut.setAttribute(\u2018class\u2019, \u2018test\u2019);<\/span>
document.getElementById(\u2018backbutton\u2032).appendChild(addbut);<\/span><\/p>\n