2014年03月20日

outerHTML プロパティ

スポンサード リンク

 outerHTML プロパティ
指定した要素に HTMLを設定、または要素のHTMLを返します。

表示サンプル
  • ジャバスクリプト
  • スタイルシート
  • サンプル集
HTMLタグ
<ul id="ulList">
 <li>ジャバスクリプト</li>
 <li>スタイルシート</li>
 <li>サンプル集</li>
</ul>
 
要素のHTMLコード取得
上記ボタン "outerHTML","innerHTML" を押すと 表示サンプルのHTMLコードが
表示されますが、内容が違います。
outerHTML は指定した要素のタグと、そのタグに含まれる HTML を返していますが
innerHTML は現在の要素を囲むタグは除外しています。

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>outerHTML プロパティ</title>
<script>
    function chgCode(flg){
if(flg==0){
 outTxt.value= document.getElementById("ulList").outerHTML;}
else {
 innTxt.value=document.getElementById("ulList").innerHTML;}
            }
</script>
</head>
<body>
 <ul id="ulList"><!-- 番号なしリスト (列挙型リスト) -->
  <li>ジャバスクリプト</li>
  <li>スタイルシート</li>
  <li>サンプル集</li>
 </ul>
  <div>
<input type="button" value="outerHTML" onClick="chgCode(0)" />
<input type="button" value="innerHTML" onclick="chgCode(1)" />
   <br />  <!-- textarea要素 -->
<textarea id="outTxt" rows="7" cols="30"></textarea>
<textarea id="innTxt" rows="7" cols="30"></textarea>
  </div>
</body>
</html>
outerHTML プロパティ
指定した要素に HTMLを設定、または要素のHTMLコードを返します。
要素のHTMLコードを取得
 var content=Element.outerHTML;
   現在の要素とその子孫の HTML コードを取得します。// 上記サンプル
指定した要素に HTMLを設定
Element.outerHTML=content;
指定文字列  content
"<p>テキストのHTMLタグを<strong>ストロング</strong>や
 <em>論理強調イタリック体</em>のように、実行する。</p>"
 
<div id="hoge0" style="color : red;">
<div id="hoge1" style="color : red;"> に設定します。
id="hoge0" 指定文字列を outerHTMLプロパティ で設定

id="hoge1" 指定文字列を innerHTMLプロパティ で設定
 上記 "outerHTML","innerHTML" ボタンを押すと 指定文字列を解析して要素を書き換えます。が
outerHTMLプロパティは <div id="hoge0"> のスタイルを反映していません。
出力したコードを視ると <div id="hoge0"> は、存在せず新しいP要素と入れ替わっています。
即ち、このouterHTMLプロパティを設定すると、指定した文字列で、開始タグ、終了タグを含めて
エレメントの現在の内容を完全に書き換えてしまうので、現在の要素への参照は無効になります。
"outerHTML"ボタンを押してください。二度目からはエラーが発生します。


タグ:outerHTML
posted by javaScript at 19:22 | 大阪 ☔ | Javascript 構文 関数 ステートメント | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。