`
phoebird
  • 浏览: 114402 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

JavaScript高级程序设计 学习笔记之DOM基础(一)

    博客分类:
  • web
阅读更多
1. createElement 、createTextNode、appendChild 用法<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript">
            function createMessage(){
                var oP=document.createElement("p")//创建元素p
                var oText=document.createTextNode("HELLO WORLD")//创建文本
                oP.appendChild(oText)//将文本添加到元素
                document.body.appendChild(oP)//将元素添加到主体内容内,作为body内元素显示
            }
        </script>
    </head>
    <body  onload="createMessage()">
   </body>
显示如下:
HELLO WORLD

2、removeChild、getElementsByTagName
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript">
            function removeMessage(){
                //获取body下第一个为p元素为节点
                var oP=document.body.getElementsByTagName("p")[0];//返回一个NOde
              //  document.body.removeChild(oP);//移除p元素及其文本内容
                //可以替换成下面,效果一样,推荐用下面的方式
                oP.parentNode.removeChild(oP);//寻找到p节点的父节点,再删除p节点
            }
        </script>
    </head>
    <body  onload="removeMessage()">
        <p>hello world</p>
   </body>
</html>
显示空白
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics