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

(1)创建新节点
var para=document.createElement(“p”); //创建新的

元素
var node=document.createTextNode(“这是新段落。”); //创建了一个文本节点
para.appendChild(node); //向

元素追加这个文本节点

var element=document.getElementById(“div1”);//向一个已有的元素追加这个新元素
element.appendChild(para); //向这个已有的元素追加新元素
(2)添加、移除、替换、之前插入、之后插入、复制
appendChild()
removeChild()
replaceChild()
insertBefore()
insertAfter()
cloneNode()
(3)查找
document.getElementsByTagName("") //通过标签名称
document.getElementsByName("") //通过元素的Name属性的值
document.getElementById("") //通过元素Id,唯一性
document.getElementsByClassName(""); //通过类查找
document.querySelector("")
(4)同级
previousSibling
nextSibling

/创建节点
var parent=document.createElement(“div”);
var text=document.createTextNode(“这是第一个使用createTexxtNote创建的文本”);
parent.appendChild(text);
//console.log(parent)

//向元素中添加节点
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()

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值