要素の内容、マークアップを取得、設定する。
取得する
var markup = element.innerHTML;
<style>
.innhtm01 div {margin:10px;padding:10px;}
#innhtm01_div {border:dotted 1px red; margin-bottom:10px;}
button {margin-bottom: 1em;}
</style>
<script>
function func_innhtm01(){
var v_innhtm01 = document.getElementById('innhtm01_div').innerHTML;
alert(v_innhtm01);
}
</script>
<div class="innhtm01 demo">
<div id="innhtm01_div">要素1</div>
<button onclick="func_innhtm01();">button</button><br/>
ボタンを押すと要素内のテキストをアラート表示します。
</div>See the Pen yYYmGZ by nosigcode (@nosig) on CodePen.
設定する
element.innerHTML = markup;
<style>
.innhtm02 div {margin:10px;padding:10px;}
#innhtm02_div {border:dotted 1px red; margin-bottom:10px;}
button {margin-bottom: 1em;}
</style>
<script>
function func_innhtm02(){
var v_innhtm02 = document.getElementById('innhtm02_div')
v_innhtm02.innerHTML = '<b>書きかえました。</b>';
}
</script>
<div class="innhtm02 demo">
<div id="innhtm02_div">要素1</div>
<button onclick="func_innhtm02();">button</button><br/>
ボタンを押すと要素内のテキストが書きかわります。
</div>
