Is this practice possible? Like when checkbox checked change the related content into input form, so with that I can edit the information.
Yes of course it is possible . Not sure about your use case , but you can achieve so here is how.
var input = document.createElement("input");
input.setAttribute('type', 'checkbox');
var parent = document.getElementById("parentDiv");
parent.appendChild(input);
input.addEventListener("change", function(){
input.setAttribute('type', 'text');
input.focus();
});
input.addEventListener("focusout", function(){
if(input.getAttribute('type') == "text"){
input.setAttribute('data-text', input.value)
document.getElementById("parentDiv").innerHTML = input.getAttribute('data-text');
input.setAttribute('type', 'checkbox');
parent.appendChild(input);
}
})#parentDiv{
height:150px;
width:300px;
border:1px solid green;
}<div id="parentDiv">
<span id="placeholder">Text will be here</span>
</div></div>
You cannot change the type of an element with pure javascript. But you can hide and show some input for example. Here is how you can register the event:
var checkbox = document.getElementById('checkbox')
checkbox.addEventListener('change', (event) => {
if (checkbox.checked) {
//enable your input
} else {
//disable your input
}
})