javascript - 如何用多个html元素替换单个html元素

Question

假设我有一个要在正文中替换的 HTML 元素
即这是 body

<p> some random element </p>

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

<h1> some random element </h1>

现在我希望这个元素被一个元素数组替换

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

被替换后的最终 body 将是

<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>

怎么做 ？我试过 replaceWith但无法做到。

Answer 1

您不能直接插入 NodeList，因为 replaceWith 不接受数组作为参数。
幸运的是有一些方法可以解决这个问题

JavaScript
如果我们使用 spread operator ( ... ) 在我们的带有节点的阵列上， replaceWith() 将按预期插入元素:

// 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
jQuery 版本 replaceWith 确实使用包含 DOM 元素的常规数组:

// 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>