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

JavaScript010

js怎么将p标签换成input并将p标签的内容赋值到input的value中去。如下,第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>

html()方法可以用来读取或者设置某个元素中的HTML内容,text()方法可以用来读取或者没置某个元素中的文本内容

html()方法

此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容。要获取某个元素的内容,可以这样:

var

p_html

=

$("p").html()

//获取p元素的HTML代码

如果需要设置某元素的HTML代码,那么也可以使用该方法,不过需要为它传递一个参数。例如要设置p元素的HTML代码,可以使用如下代码:

//设置p元素的HTML代码

$("p").html("欢迎您访问简明现代魔法图书馆~~")

注意:html()方法可以用于XHTML文档,但不能用于XML文档。

text()方法

此方法类似于JavaScript中的innerText属性,可以用来读取或者没置某个元素中的文本内容。继续使用以上的HTML代码,用text()方法对p元素进行操作:

var

p_text

=

$("p").text()

//获取p元素的文本内容

与html()方法一样,如果需要为某元素设置文本内容,那么也需要传递一个参数。例如对p元素设置文本内容,代码如下:

//

设置p元素的文本内容

$("p").text("欢迎您访问简明现代魔法图书馆~~")

要注意下面两点:

JavaScript中的innerText属性并不能在Firefox浏览器下运行,而jQuery的text()方法支持所有的浏览器.

text()方法对HTML文档和XML文档都有效。

显示好友列表时,在显示好友名字的<p></p>元素中设置:<p

id="p${friend.friendId}"></p>,这样js文件就可以动态获取<p></p>元素的id,并顺利通过text()方法赋值$("#p"+userId).text(name)

js里面的getAttribute(key)是获取dom的属性值,使用方法如下:

1、首先创建一个名称为 getAttribute 的html文件。

2、添加一个button在点击事件中加入自定义函数mygetAttribute。

3、然后加入一个a链接和p标签显示获取的属性值。

4、创建一个自定义函数mygetAttribute。

5、在自定义函数中通过id的方式获取对象,在用getAttribute方法获取 href的值,并将值赋值到p标签。

6、最后在浏览器中打开文件,点击button或获取到a 表签的 href属性值,就完成了。