Replace HTML content depending on Javascript function

Question

I would like to display different HTML elements regarding the status of a variable.

In my HTML file, I have :

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

And in my JS file, I have :

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

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

The message.payloadString variable can change dynamically using websockets. With this example, it works but it just adds a new line everytime the status changes and I would like a single line to be replaced and change depending on the status.

Is there a way to do that ?

Thank you !

Olivia

Possible duplicate of Find and replace HTML string with jQuery — MisterJ
– MisterJ, Commented Jul 24, 2017 at 9:21

Satpal · Accepted Answer · 2017-07-24 09:21:22Z

2

if you want to replace the contents of the DOM element you have to use jQuery's .html() function (similar to innerHtml of JS) to look like:

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

edited Jul 24, 2017 at 9:21

Satpal

134k13 gold badges168 silver badges171 bronze badges

answered Jul 24, 2017 at 9:20

Viktor Jacynycz

867 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vivek Doshi · Accepted Answer · 2017-07-24 09:21:56Z

1

Change your .append function with .html.

Append simply explains it self, it will append to what it contains,

Html will replace the whole html part inside of the selected element.

answered Jul 24, 2017 at 9:21

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Comments

JYoThI · Accepted Answer · 2017-07-24 09:23:19Z

1

use html() instead of append()

Append is used to append the Dom element at the end of existing .

1st : you can use html()

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

2nd : you can also use empty()

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

edited Jul 24, 2017 at 9:23

answered Jul 24, 2017 at 9:21

JYoThI

12.1k1 gold badge13 silver badges26 bronze badges

Comments

Dani · Accepted Answer · 2017-07-24 09:24:41Z

0

You should remove your previous created line before add your new one. Something like this:

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

answered Jul 24, 2017 at 9:24

Dani

531 silver badge6 bronze badges

Comments

KARAN LAGALWAR · Accepted Answer · 2017-07-24 09:25:39Z

0

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

answered Jul 24, 2017 at 9:25

KARAN LAGALWAR

2271 silver badge8 bronze badges

Comments

Abdullah Danyal · Accepted Answer · 2017-07-24 09:40:59Z

The problem is you are appending the element, so it append the element at the end, hence you will get a new line everytime.

You can do it by the two ways:

you can set display to none and add a class active to display the element instead of appending.

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>

Second way is to use $(#dustbinstatus).html() as said in above answers.

Collectives™ on Stack Overflow

Replace HTML content depending on Javascript function

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related