日期:2014-05-16  浏览次数:20350 次

js操作节点(添加、删除、更改属性)

1.创建节点并添加内容:使用的方法:createElement和createTextNode

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>HTML DOM</title>
        <script type=text/javascript>
function Message()
        {
         var op=document.createElement("p");
         var oText=document.createTextNode("hello world!");
         op.appendChild(oText);
         document.body.appendChild(op);
        }
        </script>
</head>
<body onload="Message();">
</body>
</html>

2,删除节点 方法:getElementsByTagName和removeChild

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>HTML DOM</title>
        <script type=text/javascript>
        function removeMessage()
        {
         var op=document.body.getElementsByTagName("p")[0];
         op.parentNode.removeChild(op);
        }
        </script>
</head>
<body onload="removeMessage();">
        <p>hello world!</p>
</body>
</html>

3.替换节点 方法replace(new,old)

<html>
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>HTML DOM</title>
<script type=text/javascript>
      function replaceMessage()
      {
       var oNewp=document.createElement("p");
       var oText=document.createTextNode("World Hello");
       oNewp.appendChild(oText);
       var oOldp=document.body.getElementsByTagName("p")[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);
 &