elements_javascript 기술 추가 및 삭제를 위한 JS 구현 코드

JS는 요소를 추가하고 삭제합니다

안녕하세요!

삭제될 수 있어요!

내 위와 아래에 요소를 추가하세요!

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ] <!--

function $(nodeId) { return document.getElementById(nodeId); } function $Name(tagName) { return document.getElementsByTagName(tagName); }

function replaceMsg() { var newNode = document.createElement("P");//创建一个P标签 newNode.innerHTML = " 替换后的文字"; var oldNode = $Name("P")[0];//获取body里面第一个p元素 oldNode.parentNode.replaceChild(newNode,oldNode);//直接替换了标签 }

function removeMsg() { var node = $("p2");//p标签 var nodeBtn = $("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 = " 前面添加的元素";//书写P标签里面的内容 var oldNode = $("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 = " 后面添加的元素"; var oldNode = $("p3");

oldNode.appendChild(newNode); //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 = $("myTable"); //tab.createCaption().innerHTML=" 我的表格"; var oldTr = $("handleTr"); var newTr = tab.insertRow();//创建一行 var newTd1 = newTr.insertCell();//创建一个单元格 var newTd2 = newTr.insertCell();//创建一个单元格 newTd1.innerHTML = " "; newTd2.innerHTML = " ";

}

function removeRow() { var tab = $("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

elements_javascript 기술 추가 및 삭제를 위한 JS 구현 코드

관련 기사