@ JavaScript

DOM:HTMLを文字列として操作する

innerHTML プロパティ

innerHTML は要素の内のマークアップと内容をテキストとして扱うことができるプロパティです。つまり要素の中身の HTML をそのまま文字列として取得したり、差し替えたりすることが可能です。

innerhtml_01.html

<div id="header">
  <h1 id="logo">見出しレベル1</h1>
  <p>段落1つ目</p>
</div>

<script>
logo = document.getElementById('logo');
logo.innerHTML = '<strong>新しい見出し</strong>';
</script>

また、innerHTML は元のデータを取得もできますので、以下のように頭に要素を追加できます。

innerhtml_02.html

<div id="header">
  <h1 id="logo">見出しレベル1</h1>
  <p>段落1つ目</p>
</div>

<script>
header = document.getElementById("header");
headerInner = header.innerHTML;
header.innerHTML = '<div id="banner">...</div>'+headerInner;
</script>