选中make <div>上的复选框变为<input>表单

Question

Is this practice possible? Like when checkbox checked change the related content into input form, so with that I can edit the information.

Answer 1

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>