insertBefore

書式

obj.insertBefore(newObj, insObj)

属性

パラメータ 内 容
newObj 挿入するオブジェクト
insObj オブジェクト(このオブジェクトの前に挿入)

対応

[IE5〜][Firefox 1〜][Safari 1〜][Opera 8〜][Netscape 6〜]

説明

指定したエレメント内の指定された位置にオブジェクトを挿入します。戻り値は挿入したオブジェクトへの参照になります。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>Sample</title>
<script type="text/javascript"><!--
function create(objID) {
var imgObj = document.createElement("img");
imgObj.src = "icon.jpg";
var divObj = document.getElementById("pBox");
var spanObj = document.getElementById(objID);
ref = divObj.insertBefore(imgObj, spanObj);
alert(ref);
}
// --></script>
</head>
<body bgcolor="#fffff0">
<h1>insertBefore</h1>
<form>
<input type="button" id="myButton" value="chld1の前に挿入" onClick="create('chd1')">
<input type="button" id="myButton" value="chld2の前に挿入" onClick="create('chd2')">
</form>
<div id="pBox"><span id="chd1">Text1</span><span id="chd2">Text2</span></div>
</body>
</html>