I have a java script code that when i click submit button it will add list in my List items. but i want my list to have and “X” button or specifically “×” for deleting purpose. my code goes like this :
JavaScript
x
8
1
const closeBtn = document.createElement('button');
2
3
closeBtn.className = "closeBtn";
4
5
closeBtn.type = "button";
6
7
closeBtn.textContent = "×";
8
But instead of getting the X button i want, i get a button like this:
Advertisement
Answer
First use ×
and not $times;
.
Second, use .innerHTML
and not textContent
.
JavaScript
1
6
1
const closeBtn = document.createElement('button');
2
closeBtn.className = "closeBtn";
3
closeBtn.type = "button";
4
closeBtn.innerHTML = "×" //String.fromCharCode("×");
5
6
document.querySelector('.content').append(closeBtn)
JavaScript
1
3
1
.closeBtn{
2
font-size: 20px;
3
}
JavaScript
1
1
1
<div class="content"></div>
CSS Way:
You can find the Unicode for the character and use it with css. This is better as CSS is lighter compared to JS
JavaScript
1
6
1
.closeBtn{
2
font-size: 20px;
3
}
4
.closeBtn::before {
5
content: "2715";
6
}
JavaScript
1
3
1
<div class="content">
2
<button class='closeBtn'></button>
3
</div>