根據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內容

回答

相關問題