Sometimes, we want to make a span element editable with JavaScript.
In this article, we’ll look at how to make a span element editable with JavaScript.
How to make a span element editable with JavaScript?
To make a span element editable with JavaScript, we can set the contentEditable property of the span to true.
For instance, we write:
<span>hello world</span>
<button>
edit
</button>
to add a span and a button.
Then we write:
const button = document.querySelector('button')
const span = document.querySelector('span')
button.onclick = () => {
span.contentEditable = true
}
to make the span editable when we click on the button.
To do this, we select the span and button with querySelector.
Then we set button.onclick to a function that sets span.contentEditable to true.
As a result, when we click edit, then we can change the span’s text by typing in it.
Conclusion
To make a span element editable with JavaScript, we can set the contentEditable property of the span to true.
