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