JavaScriptでHTML要素を置換する
document.getElementById($ID).innerHTML で HTML 内の文字列を取得できることがわかった。
今度は、これを編集して、編集した結果で置換したい。innerHTML にそのまま代入すればいいのだろうか。
<script type="text/javascript"> var array = document.getElementById("sample").innerHTML.split("\n"); var replaced = ""; for( i = 0 ; i < array.length ; i++ ){ replaced = replaced + array[i] + "<br/>"; } document.getElementById("sample").innerHTML = replaced; </script>
うまくいったようだ。オリジナルの HTML は、
<div id="sample">DIV value1 DIV value2 DIV value3</div>
だが、ブラウザでソースを見ると
<div id="sample">DIV value1<br>DIV value2<br>DIV value3<br></div>
となった。成功だ。