How to replace DOM element in place using Javascript?

Asked
Active3 hr before
Viewed126 times

8 Answers

usingreplacejavascriptelement
90%

Finally, select the parent element of the target element and replace the target element by the new element using the replaceChild() method.,Then, create a new element.,First, select the DOM element that you want to replace.,Finally, get the parent of the target element and call the replaceChild() method:

See the following HTML document:

.wp-block-code {
	border: 0;
	padding: 0;
}

.wp-block-code > div {
	overflow: auto;
}

.shcb-language {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
	word-break: normal;
}

.hljs {
	box-sizing: border-box;
}

.hljs.shcb-code-table {
	display: table;
	width: 100%;
}

.hljs.shcb-code-table > .shcb-loc {
	color: inherit;
	display: table-row;
	width: 100%;
}

.hljs.shcb-code-table .shcb-loc > span {
	display: table-cell;
}

.wp-block-code code.hljs:not(.shcb-wrap-lines) {
	white-space: pre;
}

.wp-block-code code.hljs.shcb-wrap-lines {
	white-space: pre-wrap;
}

.hljs.shcb-line-numbers {
	border-spacing: 0;
	counter-reset: line;
}

.hljs.shcb-line-numbers > .shcb-loc {
	counter-increment: line;
}

.hljs.shcb-line-numbers .shcb-loc > span {
	padding-left: 0.75em;
}

.hljs.shcb-line-numbers .shcb-loc::before {
	border-right: 1px solid #ddd;
	content: counter(line);
	display: table-cell;
	padding: 0 0.75em;
	text-align: right;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	white-space: nowrap;
	width: 1%;
}<html>
<head>
  <title>Replace a DOM element</title>
</head>
<body>

  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/service">Service</a></li>
    <li><a href="/about">About</a></li>
  </ul>

  <script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)
load more v
88%

Meta Stack Overflow , Stack Overflow help chat ,Stack Overflow en español,Stack Overflow на русском

by using replaceChild():

<html>

<head>
</head>

<body>
   <div>
      <a id="myAnchor" href="http://www.stackoverflow.com">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>
load more v
72%

The task is to replace an element by another element in place using JavaScript. Below are the few methods:,Replace a DOM element with another DOM element in place,How to replace line breaks with <br> using JavaScript ?,How to Combine multiple elements and append the result into a div using JavaScript ?

Syntax:
node.parentNode
load more v
65%

Remove an element from the DOM tree and insert a new one in its place.,Replacing one element with another by use of the cross-browser safe DOM method replaceChild():,Find other examples about the replaceChild() method on w3schools.

Replacing one element with another by use of the cross-browser safe DOM method replaceChild():

// select the element that will be replacedvar el = document.querySelector('div');// create a new element that will take the place of "el"var newEl = document.createElement('p');newEl.innerHTML = '<b>Hello World!</b>';// replace el with newELel.parentNode.replaceChild(newEl, el);
75%

We can replace a DOM element in place with JavaScript by getting the parent of the element we want to replace.,We can replace a DOM element in place by getting the parent node of the element we want to replace and call replaceChild on the parent node.,Sometimes, we want to replace a DOM element in place with JavaScript.,Or we can call the replaceWith on the element we want to replace and pass in the element we want to replace as the argument.

For instance, if we have the following HTML:

<div> hello world</div>
load more v
40%

The new node to replace oldChild. If it already exists in the DOM, it is first removed. , The Node.replaceChild() method replaces a child node within the given (parent) node. , The returned value is the replaced node. This is the same node as oldChild. , Note the idiosyncratic argument order (new before old). Element.replaceWith() may be easier to read and use.

let oldChild = parentNode.replaceChild(newChild, oldChild);
load more v
22%

I am looking to replace an element in the DOM. For example, there is an <a> element that I want to replace with a <span> instead.,a is the replaced A element.,Example for replacing LI elements,You can replace an HTML Element or Node using Node.replaceWith(newNode).

by using replaceChild():

<html>

<head>
</head>

<body>
   <div>
      <a id="myAnchor" href="http://www.stackoverflow.com">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>
load more v
60%

To replace it with another DOM element, you can call the replaceWith() method on the first element, passing the second element as argument:,Another solution is to lookup the parent and use the replaceChild() method, which is much older and supported by all browsers:,Say you have a DOM element, which you have a reference to (maybe retrieved using querySelector()).,Since Edge <17 and IE11 do not support it, you should transpile it to ES5 using Babel if you plan to support those browsers.

const el1 = document.querySelector( /* ... */ )
const el2 = document.querySelector( /* ... */ )

el1.replaceWith(el2)
load more v

Other "using-replace" queries related to "How to replace DOM element in place using Javascript?"