element.insertAdjacentHTML( position, html )メソッド

element.insertAdjacentHTML( position, html )は、「element」に指定した要素の引数「position」に指定した位置に引数「html」に指定したHTMLやテキストなどを挿入するメソッド。

構文

var $stringRepresentingTheElement = $elementReference.insertAdjacentHTML( position, html );

引数

position
挿入する位置。
beforebegin
「element」に指定した要素の前。
afterbegin
「element」に指定した要素内の最初の要素の前。
beforeend
「element」に指定した要素内の最後の要素の後。
afterend
「element」に指定した要素の後。
html
挿入するHTMLやテキスト。

サンプル

サンプル

サンプルの動作について

  • 「beforebegin」ボタンをクリックすると、赤い枠線の要素の上に「[数値] beforebegin」を追加する。
  • 「afterbegin」ボタンをクリックすると、「サンプル」というテキストの上に「[数値] afterbegin」を追加する。
  • 「beforeend」ボタンをクリックすると、「サンプル」というテキストの下に「[数値] beforeend」を追加する。
  • 「afterend」ボタンをクリックすると、赤い枠線の要素の下に「[数値] afterend」を追加する。
  • [数値]は、何回目のクリックであるかを表している。

サンプルのソースコード

JavaScript

<script type="text/javascript">
var $count = 0;
function beforebegin() {
    var $elementNodeReference = document.getElementById( "sample" );
    var $beforebegin = "<p>[" + ++$count + "] beforebegin</p>";
    $elementNodeReference.insertAdjacentHTML( 'beforebegin', $beforebegin );
}
function afterbegin() {
    var $elementNodeReference = document.getElementById( "sample" );
    var $afterbegin = "<p>[" + ++$count + "] afterbegin</p>";
    $elementNodeReference.insertAdjacentHTML( 'afterbegin', $afterbegin );
}
function beforeend() {
    var $elementNodeReference = document.getElementById( "sample" );
    var $beforeend = "<p>[" + ++$count + "] beforeend</p>";
    $elementNodeReference.insertAdjacentHTML( 'beforeend', $beforeend );
}
function afterend() {
    var $elementNodeReference = document.getElementById( "sample" );
    var $afterend = "<p>[" + ++$count + "] afterend</p>";
    $elementNodeReference.insertAdjacentHTML( 'afterend', $afterend );
}
</script>

HTML

<p>
    <button onclick="beforebegin();">beforebegin</button>
    <button onclick="afterbegin();">afterbegin</button>
    <button onclick="beforeend();">beforeend</button>
    <button onclick="afterend();">afterend</button>
</p>
<div id="wrapSample">
    <div id="sample"><p>サンプル</p></div>
</div>

CSS

<style>
#wrapSample {
    padding: 10px;
    border: 1px solid #CC0000;
    background-color: #FFFF66;
}
#sample {
    padding: 10px;
    border: 1px solid #FF0000;
    background-color: #FFFFCC;
}
</style>

スポンサード リンク

カテゴリー: DOM, Elementオブジェクト, JavaScript, メソッド, リファレンス パーマリンク