Question

我想显示有关变量状态的不同HTML元素。

在我的HTML文件中，我有：

<div id="dustbinstatus"></div>

在我的JS文件中，我有：

if (message.payloadString == "full"){ 
    $('#dustbinstatus').append('<i class="material-icons">delete</i>');
} 

else if (message.payloadString == "empty"){
    $('#dustbinstatus').append('<p> Dustbin ok </p>');
}

message.payloadString变量可以使用websockets动态更改。通过这个例子，它可以工作，但只是每次状态改变时都会添加一个新行，我想要替换一行并根据状态进行更改。

有办法吗？

谢谢！

奥利维亚

Answer 1

如果你想替换DOM元素的内容，你必须使用jQuery的.html()函数（类似于JS的innerHtml）看起来像：

$('#dustbinstatus').html('<p> Dustbin ok </p>');

Answer 2

使用html()代替append()

附加用于在现有结尾附加Dom element。

第一名：您可以使用html()

 $('#dustbinstatus').html('<p> Dustbin ok </p>');

第二名：您也可以使用empty()

$('#dustbinstatus').empty().append('<p> Dustbin ok </p>');

Answer 3

使用.append更改.html功能。

Append只是自我解释，它会附加到它包含的内容，

Html将替换所选元素中的整个html部分。

Answer 4

您应该在添加新行之前删除之前创建的行。像这样：

$('#dustbinstatus').empty();
if (message.payloadString == "full"){ 
    $('#dustbinstatus').append('<i class="material-icons">delete</i>');
} 

else if (message.payloadString == "empty"){
    $('#dustbinstatus').append('<p> Dustbin ok </p>');
}

Answer 5

       $('#dustbinstatus').html('');//blank existing dom before append
        if (message.payloadString == "full"){ 
         $('#dustbinstatus').append('<i class="material-icons">delete</i>');
         } else if (message.payloadString == "empty"){
          $('#dustbinstatus').append('<p> Dustbin ok </p>');
       }

Answer 6

问题是你要附加元素，所以它会在最后追加元素，因此每次都会得到一个新行。

您可以通过以下两种方式实现：

您可以将显示设置为无，并添加一个活动类来显示该元素而不是附加。

var message = "full";
if (message == "full"){ 
    $('.material-icons').attr('class', 'active');
    $('#dustbinstatus p').attr('class', 'notactive');
} 

else if (message == "empty"){
    $('#dustbinstatus p').attr('class', 'active');
    $('.material-icons').attr('class', 'notactive');
}

.active{
  display:block;
}

.notactive{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dustbinstatus">
  <i class="material-icons">delete</i>
  <p> Dustbin ok </p>
</div>

第二种方法是使用上面答案中所述的$(#dustbinstatus).html()。

根据Javascript函数替换HTML内容

6 个答案: