|
|
Insert an element before a HTML element using DOM - DOM
|
Views : 800
|
|
Tagged in : DOM
|
|
|
Report This Scrap as Inappropriate We request you to choose the appropriate categroy and subcategory that suits your
objectionable concern about the scrap, So that our team can review and find out whether it violates our Guidelines or the
scrap is not suitable for all viewers.
|
sometimes we may want to add an HTML element dynamically before an element, for that there is a DOM function called as insertBefore().
This function is very useful when we want to place/add an element between two elements or specifically before any element.
Here is an example,
<html>
<body>
<div>
<span id="firstSpan">This is first Span</span>
<span id="childSpan">This is second Span</span>
</div>
<script type="text/javascript">
// create an empty element node
// without an ID, any attributes, or any content
var sp1 = document.createElement("select");
// give it an id attribute called 'newSpan'
sp1.setAttribute("id", "newSpan");
// create some content for the newly created element.
var sp1_content = document.createElement("option");
sp1_content.setAttribute("value","This is a new span element. ");
// apply that content to the new element
sp1.appendChild(sp1_content);
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;
// insert the new element into the DOM before sp2
parentDiv.insertBefore(sp1, sp2);
</script>
</body>
</html>
In the above example a new select element will be added between the first two span.
|
|
By Vijay, On - 2009-03-10 |
|
|
|