Question

js怎么将p标签换成input并将p标签的内容赋值到input的value中去。如下

<li><label>姓名：</label><p>张苏安</p></li>
<li> <label>手机号：</label><p>15284555524</p></li>
点击按钮（onclick=modify()）变成
<li><label>姓名：</label><input type="text" name="Name" id="Name" value="张苏安"></li>
<li> <label>手机号：</label><input type="text" name="Mobile" id="Mobile" value="15284555524"></li>

Answer 1

//定义 ID 的匹配规则
var kv = [{ "label": "姓名", "id": "Name" }, { "label": "手机号", "id": "Mobile"}];
//变成编辑事件
function modify() {
    //获取页面上所有的 li 标签元素
    //这里的 document 可以换成 document.getElementById("ul1")
    //表示只查找 ul1 标签下面的 li 标签
    var lis = document.getElementsByTagName("li");
    //遍历找到的 li 标签
    for (var i = 0; i < lis.length; i++) {
        //查找 li 标签下的 p 标签
        var ps = lis[i].getElementsByTagName("p");
        //查找 li 标签下的 label 标签
        var labels = lis[i].getElementsByTagName("label");
        var p = ps[0]; //取第一个 p 标签元素
        var label = labels[0]; //取第一个 label 标签元素
        var t = p.innerHTML; //获取 p 标签中的文本

        //同理，name 的值也可以像 id 一样额外设定
        var id = getID(label);
        //删除 P 标签
        lis[i].removeChild(p);
        //累加文本框
        lis[i].innerHTML += "<input type='text' name='" + id + "' id='" + id + "' value='" + t + "' />";
    }
}
//根据规则设定 ID
function getID(label) {
    var id = "";
    var t = label.innerHTML;
    for (var i = 0; i < kv.length; i++) {
        //如果标签中含有指定字眼，则设定为对应的 ID
        if (t.indexOf(kv[i].label) > -1) {
            id = kv[i].id;
            break;
        }
    }
    return id;
}

<input type="button" value="编辑" onclick="modify()" />
<ul id="ul1">
<li><label>姓名：</label><p>张苏安</p></li>
<li><label>手机号：</label><p>number</p></li>
</ul>

Answer 2

function change(){
document.getElementById("in").value="小猪";
}

input 不是成对标签，它是的格式是这样的<input type="text" value="猪头" />