Question

说我有以下html：

<div id="myDiv" title="My Div">This is me!</div>

我想写一个jquery语句，结果是上面的整行作为字符串。

我几乎想要这样的东西： var selectedHtml = $("#myDiv").self();（我知道这不是有效的jquery）会导致selectedHtml的值为“<div id="myDiv" title="My Div">This is me!</div>”

关于我正在寻找哪个jquery函数的任何想法？

PS：获取此节点.html()的{{1}}将无效，因为它也会为我提供上述节点的兄弟节点。

Answer 1

我认为也许是可能的：

wrap您的div与另一个div（<div id="wrapdiv" />） - ＆gt; wrap()
获取wrapdiv上的html
unwrap wrapdiv（所以$("#myDiv").unwrap()） - ＆gt; unwrap()

以下是一个实例：http://jsbin.com/oniki/edit

修改

也许这样更好，因为它不会对wrapperdiv使用id，因此对现有ID的bug的更改较少：

wrap()你的div与另一个（无名）div

获取您div的html()的{{1}}

parent()你的div

查看实际操作：http://jsbin.com/oniki/3/edit

Answer 2

您可以使用普通的javascript来执行此操作。

var selectedHtml = document.getElementById ( "myDiv" ).outerHTML; //IE only

您可以使用它来获取jquery元素的outerHTML

jQuery.fn.outerHTML = function() {
    return $('<div>').append( this.eq(0).clone() ).html();
};

这

jQuery Snippets: outerHTML

Answer 3

发现这一点 - 非常完整，但我不确定它是否有点过分......

jQuery.fn.extend( {
outerHtml: function( replacement )
{
 // We just want to replace the entire node and contents with
 // some new html value
 if (replacement)
 {
  return this.each(function (){ $(this).replaceWith(replacement); });
 }

 /*
  * Now, clone the node, we want a duplicate so we don't remove
  * the contents from the DOM. Then append the cloned node to
  * an anonymous div.
  * Once you have the anonymous div, you can get the innerHtml,
  * which includes the original tag.
  */
 var tmp_node = $("<div></div>").append( $(this).clone() );
 var markup = tmp_node.html();

 // Don't forget to clean up or we will leak memory.
 tmp_node.remove();
  return markup;
 }
});

http://ivorycity.com/blog/2009/08/18/3/

Answer 4

您已经可以使用以下方法使用标准jQuery执行此操作：

如果你的元素是：

<a id="myAnchor" href="http://www.mysite.com/"><span>This is my link</span></a>

你想要得到精确的外部HTML，你可以使用：

myhtml = $('<div>').append($('#myAnchor').eq(0).clone()).html());
alert(myhtml);

不使用任何jquery插件或任何东西。警告框将显示：

<a id="myAnchor" href="http://www.mysite.com/"><span>This is my link</span></a>

jQuery - 获取所选元素的内容（不是其内容的html）

4 个答案: