根据Javascript函数替换HTML内容

我想显示有关变量状态的不同HTML元素。根据Javascript函数替换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的动态变化。在这个示例中，它可以工作，但每次状态更改时都会添加一条新线，我希望根据状态更换一条线并进行更改。

有没有办法做到这一点？

谢谢！

奥利维亚

来源

2017-07-24 Olivia Delpierre

使用html（）代替append（） – JYoThI

可能重复[用jQuery查找和替换HTML字符串]（https://stackoverflow.com/questions/15203611/find-and-replace-html-string- with-jquery） – MisterJ

如果你想取代你必须使用jQuery的 .html()功能（类似于JS的innerHTML的）看起来像DOM元素的内容

：

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

来源

2017-07-24 09:20:50

谢谢!!!! :) –

使用html()代替append()

追加用于在现有的末尾追加Dom element。

1：可以使用html()

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

第二：你也可以使用empty()

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

来源

2017-07-24 09:21:00 JYoThI

谢谢!!!! :) –

更改您的.append功能与.html。

Append简单地解释它的自我，它会追加到它所包含的内容，

Html将替换所选元素内的整个HTML部分。

来源

2017-07-24 09:21:56

谢谢!!!! :) –

您应该在添加新的行之前删除先前创建的行。事情是这样的：

$('#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>'); 
}

来源

2017-07-24 09:24:41 Dani

 $('#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>'); 
     }

来源

2017-07-24 09:25:39

的问题是要附加的元素，所以它在末尾添加元素，因此，你会得到一个新行每次。

您可以通过两种方式做到这一点：

您可以设置显示到无，并添加一个类积极，而不是显示附加的元素。

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()以上的答案为说。

来源

2017-07-24 09:40:59

根据Javascript函数替换HTML内容

回答

相关问题