JQuery - получить содержимое выбранного элемента (не html его содержимого)

Скажем, у меня есть следующий 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() этого node .parent() не будет работать, так как оно даст мне братьев и сестер из вышеперечисленного node.

Ответы

Ответ 1

Я думаю, что также возможно:

  • wrap ваш div с другим div (<div id="wrapdiv" />) → wrap()
  • получить html на wrapdiv
  • unwrap wrapdiv (так что $("#myDiv").unwrap()) → развернуть()

Вот живой пример: http://jsbin.com/oniki/edit

изменить

Возможно, это лучше, потому что он не использует идентификатор для wrapperdiv и, следовательно, меньше изменений для ошибок с существующими идентификаторами:

  • wrap() ваш div с другим (безымянным) div
  • получите html() parent() вашего div
  • unwrap() ваш div

Смотрите в действии: http://jsbin.com/oniki/3/edit

Ответ 2

Для этого вы можете использовать простой javascript.

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

Вы можете использовать это, чтобы получить outerHTML элемента jquery

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

С

jQuery Snippets: outerHTML

Ответ 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/

Ответ 4

Вы уже можете сделать это со стандартным jQuery со следующим методом:

Если ваш элемент:

<a id="myAnchor" href="#" onclick="location.href='http://www.mysite.com/'; return false;"><span>This is my link</span></a>

И вы хотите получить точный outerhtml, вы можете использовать:

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

Без использования каких-либо плагинов jquery или чего-то еще. В окне оповещения будет показано:

<a id="myAnchor" href="#" onclick="location.href='http://www.mysite.com/'; return false;"><span>This is my link</span></a>