我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
我试图用jQuery获取所选对象的HTML。我知道.html()函数;问题是我需要包含所选对象的HTML(在本例中为表行,其中.HTML()仅返回行内的单元格)。
我四处搜索,发现了一些非常“黑客”类型的方法来克隆对象,将其添加到新创建的div等,但这似乎真的很肮脏。有没有更好的方法,或者jQuery(1.4.2)的新版本是否提供任何类型的outerHtml功能?
当前回答
我在寻找问题的答案时遇到了这个问题,我试图删除一个表行,然后将其添加回表的底部(因为我正在动态创建数据行,但希望在底部显示“添加新记录”类型的行)。
我也有同样的问题,因为它正在返回innerHtml,因此缺少TR标记,该标记保存了该行的ID,这意味着不可能重复该过程。
我发现的答案是jquery remove()函数实际上返回了它删除的元素作为对象。所以,要删除并重新添加一行,就这么简单。。。
var a = $("#trRowToRemove").remove();
$('#tblMyTable').append(a);
如果您没有删除该对象,但希望将其复制到其他地方,请改用clone()函数。
其他回答
扩展jQuery:
(function($) {
$.fn.outerHTML = function() {
return $(this).clone().wrap('<div></div>').parent().html();
};
})(jQuery);
并像这样使用:$(“#myTableRow”).outerHTML();
2014年编辑:问题和此回复来自2010年。当时,还没有更好的解决方案。现在,许多其他回复都更好:比如埃里克·胡(Eric Hu)的回复,或者雷·卡查(Re Capcha)的回复。
本网站似乎为您提供了一个解决方案:jQuery:outerHTML|Yelotofu
jQuery.fn.outerHTML = function(s) {
return s
? this.before(s).remove()
: jQuery("<p>").append(this.eq(0).clone()).html();
};
关于:prop('outerHTML')呢?
var outerHTML_text = $('#item-to-be-selected').prop('outerHTML');
要设置:
$('#item-to-be-selected').prop('outerHTML', outerHTML_text);
这对我有用。
PS:这是jQuery1.6中添加的。
要将完整的jQuery插件制作为.outerHTML,请将以下脚本添加到任何js文件中,并在jQuery之后包含在头中:
更新新版本有更好的控制,以及更友好的jQuery选择器服务!:)
;(function($) {
$.extend({
outerHTML: function() {
var $ele = arguments[0],
args = Array.prototype.slice.call(arguments, 1)
if ($ele && !($ele instanceof jQuery) && (typeof $ele == 'string' || $ele instanceof HTMLCollection || $ele instanceof Array)) $ele = $($ele);
if ($ele.length) {
if ($ele.length == 1) return $ele[0].outerHTML;
else return $.map($("div"), function(ele,i) { return ele.outerHTML; });
}
throw new Error("Invalid Selector");
}
})
$.fn.extend({
outerHTML: function() {
var args = [this];
if (arguments.length) for (x in arguments) args.push(arguments[x]);
return $.outerHTML.apply($, args);
}
});
})(jQuery);
这将使您不仅可以获得一个元素的outerHTML,甚至可以同时获得多个元素的Array返回!并且可以在以下两种jQuery标准样式中使用:
$.outerHTML($("#eleID")); // will return outerHTML of that element and is
// same as
$("#eleID").outerHTML();
// or
$.outerHTML("#eleID");
// or
$.outerHTML(document.getElementById("eleID"));
对于多个元素
$("#firstEle, .someElesByClassname, tag").outerHTML();
代码段示例:
console.log('$.outerHTML($(“#eleID”))'+“\t”,$.outrHTML($”#eleID“)));console.log('$(“#eleID”).outerHTML()'+“\t\t”,$(“#eleID”;console.log('$(“#firstEle,.someElesByClassname,tag”).outerHTML()'+“\t”,$(“#firstEle”,.someElesByClassname,tag“).outrHTML());var checkThisOut=$(“div”).outerHTML();console.log('var checkThisOut=$(“div”).outerHTML();'+“\t\t”,选中ThisOut);$.each(checkThisOut,函数(i,str){$(“div”).eq(i).text(“My outerHTML Was:”+str);});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><script src=“https://rawgit.com/JDMcKinstry/ce699e82c7e07d02bae82e642fb4275f/raw/deabd0663adf0d12f389ddc03786468af4033ad2/jQuery.outerHTML.js“></script><div id=“eleID”>这将</div><div id=“firstEle”>被替换</div><div class=“someElesByClassname”>运行时</div><h3><tag>打开控制台以查看结果</tag></h3>
你也可以这样做
document.getElementById(id).outerHTML
其中id是要查找的元素的id