Question

我有一段像这样的代码

<p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some text

<p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some other text

我需要用

替换它

<h3>some text</h3>
<h3>some other text </h3>

感谢任何帮助。

Answer 1

javascript解决方案

<script>
document.getElementsByClassName("xd")[0].outerHTML="<h3>some text</h3>"
</script>

<p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some text</p>
<p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some text</p>
<script>
  var all_p = document.getElementsByClassName("xd");
  while (all_p.length != 0) {
    all_p[0].outerHTML = "<h3>some text</h3>";
  }
</script>

Answer 2

jquery解决方案：JSFiddle Demo

$('p[class="xd"]').each(function(index,item){
    $(item).replaceWith("<h3>"+$(item).html()+"</h3>");  // keep the text, swap the tags
});

感谢Vishal Taj PM显示更短的解决方案：JSFiddle Demo

（对于这种情况，text()和html()之间没有区别

$('p.xd').each(function(){
  $(this).replaceWith("<h3>"+$(this).text()+"</h3>")  
});

Answer 3

如果您正在寻找使用Jquery的解决方案，您可以使用replaceWith（）。它将用新的标签替换现有的标签。

请找到下面的代码段。

$('p.xd').each(function(){
  $(this).replaceWith("<h3>"+$(this).text()+"</h3>")  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some text</p>
<p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some other text</p>

如何替换HTML标记和属性

3 个答案: