js怎样添加、移除、移动、复制、创建和查找节点

（1）创建新节点

var para=document.createElement("p"); //创建新的 <p> 元素
var node=document.createTextNode("这是新段落。"); //创建了一个文本节点
para.appendChild(node); //向 <p> 元素追加这个文本节点var element=document.getElementById("div1");//向一个已有的元素追加这个新元素
element.appendChild(para); //向这个已有的元素追加新元素

（2）添加、移除、替换、之前插入、之后插入、复制

appendChild()

removeChild()

replaceChild() //replaceChild(new_child,old_child)

insertBefore()

insertAfter()

cloneNode() //不是在父元素下操作 obj.cloneNode() //obj是指要克隆的元素 cloneNode() 传入boolean值 true代表克隆obj.innerHTML值

（3）查找

document.getElementsByTagName("") //通过标签名称

document.getElementsByName("") //通过元素的Name属性的值

document.getElementById("") //通过元素Id，唯一性

document.getElementsByClassName(""); //通过类查找

document.querySelector("")

//向元素中添加节点
var grandpa=document.querySelector(".box");
//console.log(grandpa)
grandpa.appendChild(parent);

//向元素后添加节点
var p=document.createElement('p');
var html=document.createTextNode("在元素后边添加的代码");
p.appendChild(html)
insertAfter(p,grandpa);
function insertAfter( newElement, targetElement ){
// newElement是要追加的元素 targetElement 是指定元素的位置
var grandpa = targetElement.parentNode; // 找到指定元素的父节点
if( grandpa.lastChild == targetElement ){ // 判断指定元素的是否是节点中的最后一个位置如果是的话就直接使用appendChild方法
grandpa.appendChild( newElement, targetElement );
}else{
grandpa.insertBefore( newElement, targetElement.nextSibling );
};
};

//向元素前添加节点insertBefore
var h6=document.createElement("h6");
var htext=document.createTextNode("在元素之前添加h6");
h6.appendChild(htext);
//console.log(htext);
console.log(grandpa)
parent.parentNode.insertBefore(h6,parent);//运用同级的方法在同级元素之前插入

//元素内部的前面插入节点insertBefore
function inhoutEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementById("p1");
newNode.innerHTML = " 元素内部的前面插入节点 ";
oTest.insertBefore(newNode,reforeNode); // 新建的元素节点插入到 id为p1的元素前面
} inhoutEle()

//元素内部的后面插入节点appendChild
function inqianEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementById("p1");
newNode.innerHTML = " 元素内部的前面插入节点 ";
oTest.appendChild(newNode,reforeNode); // 新建的元素节点插入到 id为p1的元素前面
} inqianEle()
</script>

js怎样添加、移除、移动、复制、创建和查找节点相关推荐

（完全详解）JavaScript 添加、复制、移除、移动、创建和查找节点
(完全详解)JavaScript 添加.复制.移除.移动.创建和查找节点一.创建新节点 1.document.createDocumentFragment() //创建一个 DOM 片段 creat ...
怎样添加、移除、移动、复制、创建和查找节点？
1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 ...
DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
(1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() // ...
js实现input框添加移除属性
js代码添加移除属性 $(".readOnlyAttr").attr("readOnly",true");$(".readOnlyAttr ...
js的DOM节点操作：创建，插入，删除，复制，查找节点
DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...
JS/jQuery添加和移除CSS样式
有时候需要添加CSS样式和移除CSS样式,如添加display属性,设为隐藏.有时候需要移除display属性. 一.jQuery移除CSS样式的两种方法注意:当其中一种不支持时,就尝试另一种: $ ...
无法执行添加/移除操作，因为代码元素**是只读的
在vs中,大量添加窗体或者控件后,发现无法由系统IDE自动生成代码,如自动添加按钮响应函数等,rc管理器界面双击按钮添加函数,会出现提示框 "无法执行添加/移除操作,因为代码元素**是只读 ...
java document创建节点_javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点...
DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...
JavaScript原生添加移除class的方法
转载自 JavaScript原生添加移除class的方法 1.JavaScript原生移除class方法 window.onload = function () {var stamp = docum ...

js怎样添加、移除、移动、复制、创建和查找节点

js怎样添加、移除、移动、复制、创建和查找节点相关推荐

最新文章

热门文章