プログラミング学習の記録 155.1 JavaScript 2 Webアプリケーションの基礎とJavaScriptを使ったプログラミングテクニック (CD-ROM付) (プログラミング学習シリーズ)の練習問題2.4

開発環境:Microsoft Visual Web Developer+Internet Explorer
Script言語:JavaScript

"JavaScript 2 Webアプリケーションの基礎とJavaScriptを使ったプログラミングテクニック (CD-ROM付) (プログラミング学習シリーズ)"のp.52の練習問題2.4を解いてみる。

2.4

// 段落を挿入
    function insert() {
    
        // id=d0のtagを取得
        var d0 = document.getElementById("d0");

// TextNode,段落を作成
        var text = document.createTextNode("段落");
        
        // 段落(p)を作成
        var p = document.createElement("p");
        
        // 作成した段落(p)の子要素のt作成したtextを追加
        p.appendChild(text);
        
        // 取得したd0の子要素に段落を追加
        d0.appendChild(p);
    }
    
    // 段落を削除
    function remove() {

// id=d0のtagを取得
        var d0 = document.getElementById("d0");
        
        // d0に子要素があるかを判定
        if (d0.lastChild != null) {
        
            // d0の最後の子要素を削除
            d0.removeChild(d0.lastChild);
        } else {

// TextNodeを作成
            var text = document.createTextNode("まず段落を挿入して!");

/* 段落(p)を作成して子要素にtextを追加してその段落を
            d0の子要素に追加 */
            var p = document.createElement("p");
            p.appendChild(text);
            d0.appendChild(p);
        }
    }</script>
<p>段落を挿入したり削除したりしてみる。</p>
<input type="button" value="Insert" onclick="insert()" />
<input type="button" value="Remove" onclick="remove()" />
<div id="d0"></div>

段落を挿入したり削除したりしてみる。