element.innerHTML

要素の内容、マークアップを取得、設定する。

取得する

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>

設定する

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>

TagTimes

Simple time tracking tool
Developed by Namu Works