javascript - 用js或者jquery怎么把input给替换成label标签？

Question

第一张图，点击修改按钮后，原来label标签的变为input标签，而且input里还多了几个属性，点击保存后就变回原来的label标签，不知道怎么替换的？要是多个怎么解决，比如第一张图中间的八个input那个情况。

Answer 1

简单的作法，就是改变input的样式，而不是改变或者替换标签。

处于阅读状态，去掉input的边框等并设置readonly属性

demo

Answer 2

 把页面原来的label 标签的父标签都加上id，例如：id=“data”

修改按钮的事件中可以这样写：

 $('#data').append("<input style='' id="" name="" >${it.content} </input>");

那些空着的，你可以自己加属性。
利用input的id把这些数据保存在json中。
保存按钮的事件，读出json的对应input的数据，一一放在label显示：
这时，

 $('#data').append("<label style='' id="" value="" >${it.content} </label>");
 

请注意，我这里append里面的内容之所以可以这样写，是因为，我用的juicer，也就是说，你下载juicer文件，然后，在你的html中引入，即可。

 <script src="../../../juicer.js"></script>
 

我这只是一个思路，你可能看不太明白。不过你要是贴了代码，可以帮你参谋完整代码里这些功能该怎么修改。

Answer 3

那就是点击修改的时候删除了labe标签，然后又插入了input标签。同理点击保存，把input标签删掉替，然后又插入了label标签。

代码如下：

(function(){

var btn_change = document.getElementById('btnChange');
var btn_save = document.getElementById('btnSave');
var get_p = document.querySelector('.foodOfDay').previousSibling;

if(btn_change.addEventListener) {
    btn_change.addEventListener('click',function(){
        get_p.innerHTML = '<input type="text" id="u_input_calorieOfDay" name="calorieOfDay" value="1475" class="month_3_input" p_value="1475"/>'
    },false);
}

if(btn_save.addEventListener) {
    btn_save.addEventListener('click',function(){
        get_p.innerHTML = '<label id="u_mspan_calorieOfDay" pvalue="1475">1475</label>'
    },false);
}

})()

这是比较简单的方法。直接innerHTML替换。同理其他的操作一样。