js dom 实例

最新推荐文章于 2022-04-19 21:41:04 发布

原创最新推荐文章于 2022-04-19 21:41:04 发布 · 691 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

12 篇文章

订阅专栏

例子1

<html>
    <head>
        <title>createElement() Example</title>
        <scripttype="text/javascript">
            function createMessage() {
                var oP= document.createElement("p");
                var oText= document.createTextNode("Hello World!");
                 oP.appendChild(oText);
                 document.body.appendChild(oP);
             }
        </script>

    </head>
    <bodyonload="createMessage()">
    </body>
</html>

removeChild()、replaceChild()、insertBefore()
删除节点

<html>
    <head>
        <title>removeChild() Example</title>
        <scripttype="text/javascript">
            function removeMessage() {
                var oP= document.body.getElementsByTagName("p")[0];
                 oP.parentNode.removeChild(oP);
             }
        </script>
    </head>
    <bodyonload="removeMessage()">
        <p>Hello World!</p>
    </body>
</html>

替换

<html>
    <head>
        <title>replaceChild() Example</title>
        <scripttype="text/javascript">
            function replaceMessage() {
                var oNewP= document.createElement("p");
                var oText= document.createTextNode("Hello Universe!");
                 oNewP.appendChild(oText);
                var oOldP= document.body.getElementsByTagName("p")[0];
                 oOldP.parentNode.replaceChild(oNewP, oOldP);
             }
        </script>
    </head>
    <bodyonload="replaceMessage()">
        <p>Hello World!</p>
    </body>
</html>

新消息添加到旧消息之前

<html>
    <head>
        <title>insertBefore() Example</title>
        <scripttype="text/javascript">
            function insertMessage() {
                var oNewP= document.createElement("p");
                var oText= document.createTextNode("Hello Universe!");
                 oNewP.appendChild(oText);
                var oOldP= document.getElementsByTagName("p")[0];
                 document.body.insertBefore(oNewP, oOldP);
             }
        </script>
    </head>
    <bodyonload="insertMessage()">
        <p>Hello World!</p>
    </body>
</html>

window.onload   =   function(){
   var txt = document.createTextNode("hello world!");
   var div = document.createElement("div");
   div.appendChild(txt);
   document.body.appendChild(div);
}