How to append non numbers in a tag, and clear the binded element in svelte

I am building a calculator app and need to append numbers to a display. I also need to either append a non-number like * /, or clear the display and use a function to do that. Both don’t work because I can’t clear the display or append non-numbers to the display. Thanks in advance!

Heres part of my code-

<script> let displayobj = 0; </script>

Then having

<p  id ="display" bind:this={displayobj}></p> 

In the display
It works for numbers like this
<button class="button" on:click={displayobj.append(9)}>9 </button>

But It doesn’t work for non numbers like* / – + symbols, and gives me a red line when i do this
<button class="button" on:click={displayobj.append(*)}>*</button>

Also when I try to clear the number like this

<button class="button" on:click={displayobj = 0}>Clear</button>

It doesn’t work and freezes
my code so I can’t append anything anymore.

So I tried to have a function do it like this

<button class="button" on:click={clear}>Clear</button>

Then having this

<script> function clear(){ displayobj = 0; }</script>

But that didn’t work either can you tell me why? Thank you!