1. ホーム
  2. jquery

[解決済み] jQueryで要素全体のhtmlを取得する [duplicate]

2022-05-15 19:38:28

質問

選択した要素の内容だけでなく、全体のhtmlを取得したいのですが。.html()は、ドキュメントによると、javascriptsのinnerHTML()メソッドを使用しているとのことです。 HTMLです。

<div id="divs">
  <div id="div1">
    <p>Some Content</p>
  </div>
  <div id="div2">
    <p>Some Content</p>
  </div>
</div>

使用方法 $('#divs:first').html(); を使うと、段落の要素だけが返されます。こんな感じで、要素全体のhtmlを取得したいのです。

  <div id="div1">
    <p>Some Content</p>
  </div>

.parentを使うと、両方の子 divのhtmlが返されてしまうので、使えません。

どのように解決するのですか?

このように、クローンを作って中身を全部取得することができます。

var html = $("<div />").append($("#div1").clone()).html();

またはプラグインにする、ほとんどはこのように、この&quot;outerHTML&quot;と呼ぶ傾向があります。

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

なら、電話すればいいだけです。

var html = $("#div1").outerHTML();