Question

我想知道如何在不替换内容的情况下更改 HTML 标记。我做了这样的事情：

$('#test > span').replaceWith('<div>' + $('#test > span').html() +'</div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
  <span>hello</span>
  <span>hello2</span>
  <span>hello3</span>
</div>

有效，但仍显示第一个值（查看代码片段）。我想我需要将 .replaceWith() 与 $(this) 合并，但我不能完全做到。

Answer 1

要执行您的要求，您可以将函数传递给 replaceWith()。此函数接受两个参数，当前元素的索引及其内容，并返回新元素以进行替换。因此，您可以使用第二个参数来更改父标签，同时保持相同的内容，如下所示：

$('#test > span').replaceWith((i, content) => `<div>${content}</div>`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
  <span>hello</span>
  <span>hello2</span>
  <span>hello3</span>
</div>

Answer 2

您还可以使用 RegExp 将内层 HTML 中的所有 <span></span> 替换为 <div></div>：

// jQuery version

$('#btnReplaceHTML').click(() => {
  const re = /(<\/?)span(>)/gm
  $('#test').html($('#test').html().replace(re, '$1div$2'));
})



/*
// "Vanilla" JavaScript version

document.getElementById('btnReplaceHTML').addEventListener('click', () => {
  const re = /(<\/?)span(>)/gm
  const elem = document.getElementById('test');
  elem.innerHTML = elem.innerHTML.replace(re, '$1div$2');
});
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
  <span>hello</span>
  <span>hello2</span>
  <span>hello3</span>
</div>
<button id="btnReplaceHTML">replace HTML</button>

如何在不替换内容的情况下替换jquery中的html标签？

2 个答案: