js对HTML元素的操作

最新推荐文章于 2023-11-28 15:34:08 发布

VioletSnowDream

最新推荐文章于 2023-11-28 15:34:08 发布

阅读量333

点赞数

本文链接：https://blog.csdn.net/VioletSnowDream/article/details/8170735

版权

 <html>
<head>
<title>JS添加删除元素</title>
<script type="text/javascript">
  
  
    function replaceMsg()
    {
        var newNode = document.createElement("P");//创建一个P标签
        newNode.innerHTML = "<font color='red'>替换后的文字</font>";
        var oldNode = document.getElementsByTagName("P").item(0);//获取body里面第一个p元素
        oldNode.parentNode.replaceChild(newNode,oldNode);//直接替换了标签
    }
  
    function removeMsg()
    {
        var node = document.getElementById("p2");//p标签
        var nodeBtn = document.getElementById("remove");//按钮
        //node.parentNode.removeChild(node); //下面效果相同
        document.body.removeChild(node);//在body中删除id为P2的元素
        //nodeBtn.parentNode.removeChild(nodeBtn);//删除该按钮
        document.body.removeChild(nodeBtn);
        //document.body.removeNode();执行这条语句将清空body里面的任何元素
    }
  
    function addbefore()
    {
        var newNode = document.createElement("p");//创建P标签
        //var newText = document.createTextNode("前面添加的元素");
        //newNode.appendChild(newText);//与下面效果一样
        newNode.innerHTML = "<font color='red'>前面添加的元素</font>";//书写P标签里面的内容
        var oldNode = document.getElementById("p3");//目标标签
        //document.body.insertBefore(newNode,oldNode);
        oldNode.parentNode.insertBefore(newNode,oldNode);//在目标标签前面添加元素
    }
  
    function addlast()
    {
        var newNode = document.createElement("p");//创建P标签
        //var newText = document.createTextNode("后面添加的元素");
        //newNode.appendChild(newText);//与下面效果一样
        newNode.innerHTML = "<font color='red'>后面添加的元素</font>";
        var oldNode = document.getElementById("p3");
      
        oldNode.appendChild(newNode);//appendChild()方法将参数元素加在oldNode中，但是位于最后部
        //document.body.appendChild(newNode);//如果使用该方法,则在body的最后添加元素
    }
  /*以下代码未作验证
    window.onload = function addArrayMsg()
    {
        var arrayMsg = ['one','two','three','four','five'];//创建数组
        var fragment = document.createDocumentFragment();//创建文档片段
        var newNode ;
        for (var i=0 ;i<arrayMsg.length ;i++ )
        {
            newNode = document.createElement("P");//创建P标签
            var nodeText = document.createTextNode(arrayMsg[i]);//创建文本标签,value为数组里面的值
            newNode.appendChild(nodeText);//
            fragment.appendChild(newNode);//把P标签追加到fragment里面
        }
        document.body.appendChild(fragment);//把fragment追加到body里面
    }

  
  
    function addRow()
    {
        var tab = document.getElementById("myTable");
        //tab.createCaption().innerHTML="<font color='red'>我的表格</font>";
        var oldTr = document.getElementById("handleTr");
        var newTr = tab.insertRow();//创建一行
        var newTd1 = newTr.insertCell();//创建一个单元格
        var newTd2 = newTr.insertCell();//创建一个单元格
        newTd1.innerHTML = "<input type='checkbox' />";
        newTd2.innerHTML = "<input type='text' />";
      
    }
  
    function removeRow()
    {
        var tab = document.getElementById("myTable");
//        if(tab.rows.length>0){
//            tab.deleteRow();
//            if(tab.rows.length==1)
//                tab.deleteCaption();
//        }
      
        var cbbox ;
        for(var i=0;i<tab.rows.length;i++){
            cbbox = tab.rows[i].childNodes[0].childNodes[0];//获取input元素
            if(cbbox.checked){
              
                tab.deleteRow(i--);
            }
        }
    }
//以上代码未验证
 */
    //全选
    function selAll(value){
        var items = document.all.tags("input");//获取页面上所有的input元素
        for(var i = 0;i<items.length;i++){
            if(items[i].type=="checkbox"){//判断类型是否为checkbox
                items[i].checked = value.checked;
            }
        }
    }
  
    function getInputValue()
    {
        var inputArray = new Array();//创建一个数组
        var tab = $("myTable");
        var tbInput;
        for(var i=0;i<tab.rows.length;i++){
           tbInput = tab.rows[i].childNodes[1].childNodes[0].value;
           if(tbInput!=""&&tbInput!=null)
               inputArray.push(tbInput);
        }
        inputArray = inputArray.join("*^&");//默认以","号连接
        document.getElementById("showValue").value = inputArray;
    }
    var x ='10+20';
("alert(x);")
</script>
</head>
<body>
<p id="p1">Hello World!</p><input type="button" value="替换内容" onClick="replaceMsg();" />
<p id="p2">我可以被删除!</p><input type="button" id="remove" value="删除它" onClick="removeMsg();" />
<p id="p3">在我上下添加一个元素吧！</p><input type="button" id="addbefore" value="前面添加" onClick="addbefore();" />
<input type="button" id="addlast" value="后面添加" onClick="addlast();" />
<p></p>
<!--
 <div style="border:1px solid blue;height:300px">
    <table id="myTable" cellpadding="0" cellspacing="0" border="1px solid blue" style="padding:4px;">
       
    </table>
    <input type="checkbox" onClick="selAll(this);" />
    <input type="button" value="添加一行" id="addRow" onClick="addRow();" />
    <input type="button" value="删除一行" id="removeRow" onClick="removeRow();" /><br>
-->
    <textarea rows="5" cols="25" id="showValue" /></textarea>
    <input type="button" id="getInputValue" onClick="getInputValue();" value="取值 " />
</div>
</body>
</html>

appendChild() 方法在指定元素节点的最后一个子节点之后添加节点。该方法返回新的子节点。

appendChild()方法通常与document.createElement("div")或document.getElementById("id")函数同用，表示先创建然后再添加。

appendChild()的参数不是字符串而是一个对象。

VioletSnowDream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js对HTML元素的操作

JS添加删除元素 function replaceMsg() { var newNode = document.createElement("P");//创建一个P标签 newNode.innerHTML = "替换后的文字"; var oldNode = document.getElementsByTagName("P
复制链接

扫一扫