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?

How to replace Dom element with JS and include an id and a JS function?

This is a follow up to this question: How to replace Dom element in place using javascript? I wasn’t the OP but I am facing a similar situation. The initial question was how to replace an anchor elem

How to replace element with text using JavaScript / jQuery? [duplicate]

This question already has an answer here: How to replace Dom element in place using javascript? 2 answers So assuming I had this: <span id=foo>bar</span> I want to replace it wit



How to replace an DOM element in place with jQuery?

Something like follows: $target.replace(‘<div>test</div>’)

Using JavaScript or JQuery how do I determine when a DOM element is added to the page?

An external JavaScript adds a DOM element to a page. Using JavaScript or JQuery how do I determine when this DOM element is added to the page?

How to move an element from one place to another in the DOM using plain JavaScript?

I know how to do it in jQUery (untested but should work): $(‘#foo’).html().appendTo(‘#bar’); $(‘#foo’).remove(); But how to do this in plain JS?

How to find and replace a string in HTML DOM element using javascript

Click the button to replace blue with red in the paragraph below: <div id=main> <p>Mr Blue has a blue house and a blue car.</p> <p>Mr Blue has a blue house and a blue car

How do I access what events have been bound to a dom element using only JavaScript, no frameworks

How do I access what events have been bound to a dom element using JavaScript and NOT using a library/framework or firefox add-on? Just pure JavaScript. I incorrectly assumed there would be an events

How to place a DOM element on the top right

This piece of code works, but I would like to know if it is the best way to place a dom element on the top right of a container. the prerequisites are the following: 1) the DOM cannot be changed. 2) t

Manipulating reference to DOM element using JavaScript

A project I’m working on has to manipulate DOM elements using JavaScript. When a particular event fires, I’m looping through the DOM and basically creating an index of all of the nodes in order to man

How to place caret inside an empty DOM Element Node

How can I place the caret (collapsed range) inside an empty element node. This code is supposed to work, but it doesnt. node = document.getElementById(‘some-empty-strong-node’) range = document.create

Answers

by using replaceChild():

<html>
<head>
</head>
<body>
  <div>
    <a id="myAnchor" target="_blank" rel="nofollow" href="http://www.stackoverflow">StackOverflow</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>
var a = A.parentNode.replaceChild(document.createElement("span"), A);

a is the replaced A element.

target.replaceWith(element);

This is valid as of ES5. Way better/cleaner than the previous method.

For your use case:

A.replaceWith(span);