Question

我已经想方设法做到这一点，我可能只是错过了一些非常明显的事情，为此我很抱歉。

我正在尝试向h2元素添加两个字符。我已经完成了，但如果我做了多个h2，则会复制第一个h2。我希望每个$(window).on("load", function() { // On page load, add greater than and less than signs to all h2s var regH2 = $('h2').html(); $('h2').html( '<' + regH2 + '>' ); });的唯一innerHTML能够在之前和之后添加这些字符。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2>header1</h2>
<h2>header2</h2>

tr.cube.fold
tr.cube.lm
tr.cube.nn
tr.cube.params
tr.cube.size
tr.cube.word-freq

Answer 1

试试这个

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

Answer 2

尝试使用.html()的{{3}}功能，

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

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

Answer 3

我的回答使用CSS代替JS：

＆＃13;

h2:before { content:'<'; }
h2:after  { content:'>'; }

＆＃13;

<h2>header1</h2>
<h2>header2</h2>

＆＃13;

这会将内容呈现为＆＃34;＆lt;＆＃34;和＆＃34;＆gt;＆＃34;甚至在您的页面完全加载之前。

如果：before和：after已在使用中，请考虑添加如下所示的额外元素：

＆＃13;

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

＆＃13;

<h2><span>header1</span></h2>
<h2><span>header2</span></h2>

＆＃13;

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

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

3 个答案: