Question

我们说我有这个HTML

<div id="cpu-temperature">
    <p><span class="degrees"> °C</span></p>
</div>

我会通过Jquery插入里面 P和之前跨度。

当然，我可以（现在）通过jquery来编写span，但我会从脚本中详细说明＆＃34; raw＆＃34;数字，而不是HTML。

实际上目前的代码是：

$('div#cpu-temperature p').html(cpu_temperature+'<span class="degrees"> °C</span>');

当然，我还需要注意＆＃34;追加＆＃34;的问题。温度每5秒记录一次，所以简单的追加＆＃34;一段时间后刷新页面......

Answer 1

您可以使用.prepend（）添加到所选元素的开头。

$('div#cpu-temperature p').prepend(cpu_temperature);

编辑 -

由于您每次只想更新温度，我会在度数跨度之前添加另一个元素。你有

<div id="cpu-temperature">
    <p><span class="temp"></span><span class="degrees"> °C</span></p>
</div>

然后运行

$('div#cpu-temperature.temp').html(cpu_temperature);

我不知道这是否真的比你现在做的更好，但我不认为你可以清除<p>标签的内容而不清除子元素。至少不容易。

Answer 2

我建议，鉴于已发布的HTML，您将°C移动到CSS中，使用CSS生成的内容，然后只是更新元素的文本，而不是尝试小心地插入它：

$('#cpu-temperature span.degrees').text(function() {
  return Math.floor(Math.random() * 80) + 20;
});

span.degrees::after {
  content: '°C';
}
span.degrees:empty::after {
  content: '';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cpu-temperature">
  <p><span class="degrees"></span>
  </p>
</div>

JS Fiddle demo

Answer 3

那就是它：

 var span = '<span class="degrees"> °C</span>';
 setInterval(function() {
   var degree = Math.round((Math.random() + 1) * 30);
   $('#cpu-temperature p').html(degree + span);
 }, 500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cpu-temperature">
  <p></p>
</div>

Answer 4

您可以将p tag的HTML转换为variable，然后在您的时间间隔内每隔5秒我们可以使用默认值替换当前的HTML，这样我们就可以prepend毫无问题。

＆＃13;

var defHTML = $('div#cpu-temperature p').html();

setInterval(function(){
  var cpu_temperature = Math.floor(Math.random() * 80) + 20;
  $('div#cpu-temperature p').html(defHTML);
  $('div#cpu-temperature p').prepend(cpu_temperature);
},500);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="cpu-temperature">
    <p><span class="degrees"> °C</span></p>
</div>

＆＃13;

花药解决方案

你可以prepend <p>标签中的任何HTMl元素，然后就可以更改此元素html

＆＃13;

$('#cpu-temperature p').prepend('<span class="tempNum"></span');
 setInterval(function() {
   var cpu_temperature = Math.round((Math.random() + 1) * 30);
   $('#cpu-temperature p span.tempNum').html(cpu_temperature);
 }, 500);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="cpu-temperature">
    <p><span class="degrees"> °C</span></p>
</div>

＆＃13;

Jquery：在标记内部和另一个之前附加元素

4 个答案: