- You are here:
- Home »
- Javascript »
- Remove and Add HTML element using Javascript
Remove and Add HTML element using Javascript
Advertisements
When creating your SAP BSP using HTML you may want to add and remove elements dynamically using JavaScript and sometimes simply setting the element to visible or not isn’t the solution you are after. Sometimes I have found that even though an element has been set 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 and when your require.
Advertisements
Original HTML code
<li id=”backButton”>
<a id=”mybackLink” href=”?OnInputProcessing(goback)” class=”myButton” >Back to previous</a>
</li>
Remove HTML elements
Removing an element is easy simply use the following JavaScript code:
Advertisements
var delbutton = document.getElementById(‘myBackLink’);
delbutton.parentNode.removeChild(delbutton);
Advertisements
Add HTML elements
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 especially if your background is SAP and you are just getting into the world of JavaScript/HTML etc.
Advertisements
Re-adding Link (a href) back to your HTML page using javascript
var addLink = document.createElement(‘a’);
var linkText = document.createTextNode(“Back to Index”);
addLink.appendChild(linkText);
addLink.title = “title”;
addLink.href = “index.htm”;
addLink.id = “mybackLink”;
addLink.setAttribute(‘class’, ‘myButton’);
document.getElementById(‘backButton’).appendChild(addLink);
Also here is the code required to add an input button instead of a link(a href)
var addbut = document.createElement(‘input’);
addbut.type = “submit”;
addbut.value = “Back to previous”;
addbut.name = “backbut″;
addbut.id = “mybackButton″;
addbut.setAttribute(‘class’, ‘test’);
document.getElementById(‘backbutton′).appendChild(addbut);
Advertisements
