IT Anawer: How to replace Dom element in place using javascript?

Friday, May 6, 2011

How to replace Dom element in place using javascript?

for an element in DOM,such as an "A" element,how to replace it with a "span" instead?

From stackoverflow

by using replaceChild():
```
<html>
<head>
</head>
<body>
  <div>
    <a id="myAnchor" href="http://www.stackoverflow">StackOveflow</a>
  </div>
<script type="text/JavaScript">
  var myAnchor = document.getElementById("myAnchor");
  var mySpan = document.createElement("span");
  mySpan.innerHTML = "replaced anchor!";
  myAnchor.parentNode.replaceChild(mySpan, myAnchor);
</script>
</body>
</html>
```
KooiInc : this example wouldn't work. You should put the script block at the end of the body to make it work. Furthermore, just for fun: try adding the line [alert(myAnchor.innerHTML)] after the operation.

apphacker : Ah yeah, good point.

apphacker : Hahahahahaha. I just did the alert. You sir, are awesome.

rahul : Theres a spelling mistake with StackOverflow in the anchor innerText

var a = A.parentNode.replaceChild(document.createElement("span"), A);

a is the replaced A element.

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)