如何使用 jquery 获取 outerHTML 以使其跨浏览器答案

【问题标题】：how to get outerHTML with jquery in order to have it cross-browser如何使用 jquery 获取 outerHTML 以使其跨浏览器
【发布时间】：2015-09-19 07:29:13
【问题描述】：

我在 jquery 论坛中找到了回复，他们制作了一个函数来执行此操作，但结果不一样。这是我为图像按钮创建的示例：

var buttonField = $('<input type="image" />');
    buttonField.attr('id', 'butonFshi' + lastsel);
    buttonField.val('Fshi');
    buttonField.attr('src', 'images/square-icon.png');
    if (disabled)
        buttonField.attr("disabled", "disabled");
    buttonField.val('Fshi');
    if (onblur !== undefined)
        buttonField.focusout(function () { onblur(); });
    buttonField.mouseover(function () { ndryshoImazhin(1, lastsel.toString()); });
    buttonField.mouseout(function () { ndryshoImazhin(0, lastsel.toString()); });
    buttonField.click(function () { fshiClicked(lastsel.toString()); });

我有这种情况：

 buttonField[0].outerHTML = `<INPUT id=butonFshi1 value=Fshi src="images/square-icon.png" type=image jQuery15205073038169030395="44">`

而不是我发现的外部函数给出了 buttonField.outer() = <INPUT id=butonFshi1 value=Fshi src="images/square-icon.png" type=image>

函数是：

$.fn.outer = function(val){
    if(val){
        $(val).insertBefore(this);
        $(this).remove();
    }
    else{ return $("<div>").append($(this).clone()).html(); }
}

这样我就松开了我插入的处理程序。有没有办法用jquery获取outerHTML，以便在不丢失处理程序的情况下跨浏览器？！

【问题讨论】：

创建自定义属性不是一件好事，比如jQuery15205073038169030395="44"。相反，使用 jQuery 函数 .data(element, key, value) 来存储自定义数据。然后，可以使用.clone(true)，这里的布尔值表示是否复制数据和事件

标签： javascript jquery cross-browser

【解决方案1】：

您不需要先将其转换为文本（这是将其与处理程序断开连接的原因，只有 DOM 节点和其他特定的 JavaScript 对象可以有事件）。直接插入新创建/修改的节点即可，例如

$('#old-button').after(buttonField).remove();`

after 返回上一个 jQuery 集合，因此 remove 删除现有元素，而不是新元素。

【讨论】：

【解决方案2】：

试试这个：

var html_text = `<INPUT id=butonFshi1 value=Fshi src="images/square-icon.png" type=image jQuery15205073038169030395="44">`
buttonField[0].html(html_text);

【讨论】：

【解决方案3】：

查看https://github.com/darlesson/jquery-outerhtml 的 jQuery 插件。使用这个 jQuery 插件，您可以从第一个匹配的元素中获取 outerHTML，替换一组元素并在回调函数中操作结果。

考虑以下 HTML：

<span>My example</span>

考虑以下调用：

var span = $("span").outerHTML();

变量span等于我的例子。

在上面的链接中，您可以找到更多关于如何使用 .outerHTML() 插件的示例。

【讨论】：

"如何使用 jquery 获取 outerHTML 以使其跨浏览器"。不知道为什么它在回答标题问题时被否决。

【解决方案4】：

这应该可以正常工作：

var outer = buttonField.parent().html();

【讨论】：

这也会抓住任何兄弟姐妹，但仍然会失去处理程序。