element.outerHTMLプロパティ

投稿日: 2013年9月2日 作成者: alphasis

element.outerHTMLは、「element」に指定した要素のHTMLを取得、もしくは、設定するプロパティ。

構文

取得

var $outerHTML = $elementNodeReference.outerHTML;

戻り値

指定した要素のHTML。

設定

$elementNodeReference.outerHTML = HTMLコンテンツ;

サンプル

サンプル：1

id属性がsampleである要素のHTML：

サンプルの動作について

  1. 「getHtml()」ボタンをクリックすると、「id属性がsampleである要素のHTML：」の下のインプット欄に<i id="sample" style="color: red;">1</i>と表示する。
  2. 「setHtml()」ボタンをクリックすると、「サンプル：」の右横に「2」と表示する。
  3. 再度、「getHtml()」ボタンをクリックすると、「id属性がsampleである要素のHTML：」の下のインプット欄に<i id="sample" style="color: red;">2</i>と表示する。
  4. 「setHtml()」ボタンをクリックする度に、id属性がsampleである要素のHTMLを、<i id="sample" style="color: red;">2</i>、<i id="sample" style="color: red;">3</i>、<i id="sample" style="color: red;">4</i>、のように数字部分をカウントアップする。
  5. 「getHtml()」ボタンをクリックすると、id属性がsampleである要素の現在のHTMLを、「id属性がsampleである要素のHTML：」の下のインプット欄に表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
var $count = 1;
function getHtml() {
    var $elementNodeReference = document.getElementById( "sample" );
    var $outerHTML = $elementNodeReference.outerHTML;
    document.getElementById( "sampleOutput" ).value = $outerHTML;
}
function setHtml() {
    var $elementNodeReference = document.getElementById( "sample" );
    $elementNodeReference.outerHTML = '<i id="sample" style="color: red;">' + ++$count + '</i>';
}
</script>

HTML

<p>サンプル：<i id="sample" style="color: red;">1</i></p>
<p>
    <button onclick="setHtml();">setHtml()</button>
    <button onclick="getHtml();">getHtml()</button>
</p>
<p>
    id属性がsampleである要素のHTML：
    <br />
    <input id="sampleOutput" style="width: 350px;"/>
</p>

スポンサード リンク

カテゴリー: DOM, Elementオブジェクト, JavaScript, プロパティ, リファレンス パーマリンク