JQuery html()和 prop("outerHTML")区别以及控件内容和选项保持问题

本文链接：https://blog.csdn.net/qq_41475058/article/details/103869191

jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码
jQuery.prop(“outerHTML”)可以获取获取包含自身的HTML代码

使用html（）和 prop(“outerHTML”)来获取节点的HTML代码，不会保持input和select中的值
而使用clone（）复制html对象的话，会保持input的值，不会保持select中的值

    $("#add_box_btn").click(function () {
        console.log($(".box").first().find("input").val())
        console.log($(".box").first().find("select").val())
        box_clone=$(".box").first().clone()
        console.log(box_clone.find("input").val())
        console.log(box_clone.find("select").val())
        box_html=$(".box").first().prop("outerHTML")
        $(".panel-body").append(box_html)
    })

例如以下是要被复制的box中的input和select控件的内容
在这里插入图片描述
先打印出控件的值，然后再clone这个box，再输出获取的克隆对象中中的input值和select值，可以看到input文本框的值还在，但select选择框已经还原成默认选项了。

然后用prop(“outerHTML”)获取box的html代码，再append，可以看到，直接用html()或prop(“outerHTML”)获取到的input值的空的，select的值是默认值，都会还原。
在这里插入图片描述

所以，如果复制控件的时候不想保持input和select的值的话，直接获取html内容再添加就好了，如果想保持select的值可以用clone，如果都想保持可以添加后再对具体的控件进行赋值。

    $("#add_box_btn").click(function () {
        box_html=$(".box").first().prop("outerHTML")
        $(".panel-body").append(box_html)
    })