指定した要素の前、後にHTMLを挿入するコードの詳細はこちらの記事を参照してください。
指定した要素の子要素の最初、または最後にHTMLを挿入するコードの詳細はこちらの記事を参照してください。
insertAdjacentHTML([挿入位置], [挿入するHTML文字列])
insertAdjacentText([挿入位置], [挿入するテキスト文字列])
値 | 意味 |
---|---|
beforebegin | 要素の直前に挿入します。要素のタグの外側です。 |
afterbegin | 要素の内部の先頭に挿入します。要素のタグの内側です。 |
beforeend | 要素の内部の末尾に挿入します。要素のタグの内側です。 |
afterend | 要素の直後に挿入します。要素のタグの外側です。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="insertAdjacentHtmlDemo.css" />
<script>
function InsertBeforeBegin() {
var elem = document.getElementById('Frame3');
elem.insertAdjacentHTML('beforebegin','<div class="ContentFrame">コンテンツです。</div>');
}
function InsertAfterBegin() {
var elem = document.getElementById('Frame3');
elem.insertAdjacentHTML('afterbegin', '<div class="ContentFrame">コンテンツです。</div>');
}
function InsertBeforeEnd() {
var elem = document.getElementById('Frame3');
elem.insertAdjacentHTML('beforeend', '<div class="ContentFrame">コンテンツです。</div>');
}
function InsertAfterEnd() {
var elem = document.getElementById('Frame3');
elem.insertAdjacentHTML('afterend', '<div class="ContentFrame">コンテンツです。</div>');
}
</script>
</head>
<body>
<h1>insertAdjacentHTMLのデモ</h1>
<hr />
<button onclick="InsertBeforeBegin();">beforebegin</button>
<button onclick="InsertAfterBegin();">afterbegin</button>
<button onclick="InsertBeforeEnd();">beforeend</button>
<button onclick="InsertAfterEnd();">afterend</button>
<hr />
<div id="Frame1" class="Frame">Frame1です。</div>
<div id="Frame2" class="Frame">Frame2です。</div>
<div id="Frame3" class="Frame">Frame3です。</div>
<div id="Frame4" class="Frame">Frame4です。</div>
</body>
</html>
.Frame {
background-color:#fff7ca;
border:2px solid #c36666;
margin:1rem 0 0 0;
padding: 0.5rem 1rem 0.5rem 1rem;
}
.ContentFrame {
background-color: #95c6d1;
border: 2px solid #3a7785;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="insertAdjacentTextDemo.css" />
<script>
function InsertBeforeBegin() {
var elem = document.getElementById('Frame3');
elem.insertAdjacentText('beforebegin','コンテンツです。');
}
function InsertAfterBegin() {
var elem = document.getElementById('Frame3');
elem.insertAdjacentText('afterbegin', 'コンテンツです。');
}
function InsertBeforeEnd() {
var elem = document.getElementById('Frame3');
elem.insertAdjacentText('beforeend', 'コンテンツです。');
}
function InsertAfterEnd() {
var elem = document.getElementById('Frame3');
elem.insertAdjacentText('afterend', 'コンテンツです。');
}
</script>
</head>
<body>
<h1>insertAdjacentHTMLのデモ</h1>
<hr />
<button onclick="InsertBeforeBegin();">beforebegin</button>
<button onclick="InsertAfterBegin();">afterbegin</button>
<button onclick="InsertBeforeEnd();">beforeend</button>
<button onclick="InsertAfterEnd();">afterend</button>
<hr />
<div id="Frame1" class="Frame">Frame1です。</div>
<div id="Frame2" class="Frame">Frame2です。</div>
<div id="Frame3" class="Frame">Frame3です。</div>
<div id="Frame4" class="Frame">Frame4です。</div>
</body>
</html>
.Frame {
background-color:#c7e9b7;
border:2px solid #2e905d;
margin:1rem 0 0 0;
padding: 0.5rem 1rem 0.5rem 1rem;
}