如何在h2 innerhtml之前和之后添加字符

How to add characters before and after h2 innerhtml

本文关键字：之后 添加 字符 h2 innerhtml      更新时间：2023-09-26

我已经搜索了这样做的方法，我可能只是错过了一些非常明显的东西，为此我感到抱歉。

我试图添加两个字符到h2元素。我已经做过了，但是如果我做了不止一个h2第一个就被复制了。我希望每个h2的唯一innerHTML在前后添加这些字符。

我知道我可以用css做这个，但是我已经在元素上做了之前和之后的事情。

$(window).on("load", function() {
// On page load, add greater than and less than signs to all h2s
var regH2 = $('h2').html();
$('h2').html( '<' + regH2 + '>' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2>header1</h2>
<h2>header2</h2>

试一下

$('h2').each(function(){
  var regH2 = $(this).html();
  $(this).html( '&#60;' + regH2 + '&#62;' );
});

尝试使用.html()的callBack功能，

$(window).on("load", function() {
   $('h2').html(function(_,regH2){ 
     return '&#60;' + regH2 + '&#62;'; 
   });
});

在上面的代码中，regH2每次都会收到旧的html字符串。

我的答案是使用CSS而不是JS:

h2:before { content:'<'; }
h2:after  { content:'>'; }
<h2>header1</h2>
<h2>header2</h2>

这会在页面完全加载之前呈现带有"<"answers">"的内容。

如果:before和:after已经在使用，考虑添加如下的额外元素:

h2 span:before { content:'<'; }
h2 span:after  { content:'>'; }
<h2><span>header1</span></h2>
<h2><span>header2</span></h2>

对于我来说，当静态内容通过JS添加时，我总是哭泣。div;)

相关文章：