0

Suppose I have a single HTML element that I want to be replaced in the body

i.e. this is the body

<p> some random element </p>

<a href="#" id="dfd32"> some text</a>  //  this element to replace 

<h1> some random element </h1>

Now I want this element to get replaced by an array of elements

[ 
  <a href="#" id="dsd32dsd"> 23dfsome text12</a>, 
  <a href="#" id="dfwedwew"> sdfsome text23</a>, 
  <a href="#" id="dssfd"> somdfse text2</a>
]

the final body after getting replaced will be

<p> some random element </p>

<a href="#" id="dsd32dsd"> 23dfsome text12</a>
<a href="#" id="dfwedwew"> sdfsome text23</a>
<a href="#" id="dssfd"> somdfse text2</a>

<h1> some random element </h1>

How to do that ? I tried with replaceWith but not able to do it.

0stone0
  • 34,288
  • 4
  • 39
  • 64
Anuresh Verma
  • 818
  • 1
  • 13
  • 30
  • Surround the a tag with a div, then target this div and replace it with the contents of your array. Use join on your array to create one big string. – Wimanicesir Jul 07 '21 at 13:39
  • Please show the [`.replaceWith(...nodes)`](https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceWith) approach because that would be one suitable solution – Andreas Jul 07 '21 at 13:41
  • Since you've tagged the question with Jquery, and not with Javascript. Do you require a Jquery only solution? – 0stone0 Jul 07 '21 at 13:53
  • @0stone0 No issue with javascript too. Jquery will be better. – Anuresh Verma Jul 07 '21 at 13:57
  • _"it's not possible with replaceWith"_ - Then why did you accept the answer with `.replaceWith()`? – Andreas Jul 07 '21 at 14:13
  • Although no one is required to explain a down vote, but... From the tooltip: _"This question does not show any research effort; it is unclear or not useful (click again to undo)"_ - This question doesn't show any research effort, hence -> DV. @chaitanyagupta Care to explain what this has to do with reputation? – Andreas Jul 07 '21 at 14:15
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/234626/discussion-between-anuresh-verma-and-andreas). – Anuresh Verma Jul 07 '21 at 14:42

1 Answers1

2

You can't insert a NodeList directly, since replaceWith does not accepts an array as parameter.

Luckily there are some ways around this

JavaScript

If we use the spread operator (...) on our array with nodes, replaceWith() will insert the elements as expected:

// Array to replace
const ar = [];
for (var i = 1; i <= 3; i++) {
    let tmp = document.createElement('a');
    tmp.innerHTML = 'Link #' + i;
    ar.push(tmp);
}

// Get element to replace
const el = document.getElementById('dfd32');

// Insert the array nodes
el.replaceWith(...ar);
<p> some random element </p>
<a href="#" id="dfd32"> some text</a>
<h1> some random element </h1>

jQuery

jQuerys version of replaceWith does work with a regular array containing DOM elements:

// Array to replace
const ar = [ $('<a>Link #1</a>'), $('<a>Link #2</a>'), $('<a>Link #3</a>') ];

// Get and replace
$('#dfd32').replaceWith(ar);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p> some random element </p>
<div href="#" id="dfd32"> some text</div>
<h1> some random element </h1>
0stone0
  • 34,288
  • 4
  • 39
  • 64