Javascript DOM 的节点操作示例

>

<div>

    <div >>

    <p>第一个元素</p>

    <p>第二个元素</p>    

    </div>

    <a href="javascript:append()">直接追加</a>

    <div >>

    <p>第一个元素</p>

    <p>第二个元素</p>

    </div>

    <a href="javascript:insert()">之前追加</a>    

    <div >>

    <p>第一个元素</p>

    <p>第二个元素</p>

    </div>

    <a href="javascript:insertAfter()">之后追加</a>

</div>

<script>

    function createObj(){

        var img = document.createElement("img");

        img.src="lang.gif"

        img.style.width="50px";

        img.style.height="50px";

        return img;

    }

    function append(){

        var one = document.getElementById("one");

        var img = createObj();

        one.appendChild(img);

    }

    function insert(){ // 这个方法要求对象必须是目标对象的父级元素!!!

        var two = document.getElementById("two");

        var obj = document.getElementById("two").getElementsByTagName("p")[0];

        var img = createObj();

        two.insertBefore(img,obj);

    }

    function insertAfter(){ // 没有在元素之后插入的方法,可手动创建加以合适的判断

        var three = document.getElementById("three");

        var obj = document.getElementById("three").getElementsByTagName("p")[0];

        var img = createObj();

        if(obj.nextSibling)

            three.insertBefore(img,obj.nextSibling);

        else

            three.appendChild(img);

    }

</script>

</body>