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

超、凢脫俗 2022-05-23 11:15 174阅读 0赞

（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()

insertBefore()

insertAfter()

cloneNode()

（3）查找

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

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

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

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

document.querySelector("")

<div class="box"></div>  
<div id="box-one">  
<p id="p1">p1p1p1p1</p>  
</div>

<script type="text/javascript">  
//创建节点  
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()  
</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS篇(006)-怎样添加、移除、移动、复制、创建和查找节点？

答案： 1）创建新节点 \ createDocumentFragment() //创建一个 DOM 片段 \ createElement() //创建一个具体的元素

阳光穿透心脏的1/2处/ 2023年01月01日 05:55/ 0 赞/ 121 阅读

相关 [JavaScript]DOM操作，如何添加、插入、移除、替换、复制、创建、查找节点

\\添加:appendChild 插入:insertBefore 移除:removeChild 移动:replace 复制:clone 创建:createE

妖狐艹你老母/ 2022年11月27日 10:16/ 0 赞/ 138 阅读

相关 MongoDB 复制集节点增加移除及节点属性配置

> 复制集(replica Set)或者副本集是MongoDB的核心高可用特性之一，它基于主节点的oplog日志持续传送到辅助节点，并重放得以实现主从节点一致。再结合心跳机制，

梦里梦外;/ 2022年09月27日 04:51/ 0 赞/ 171 阅读

相关 DOM--如何添加、移除、移动、复制、创建和查找节点等。

创建新节点: createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的

﹏ヽ暗。殇╰゛Y/ 2022年06月10日 00:16/ 0 赞/ 158 阅读

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

（1）创建新节点 var para=document.createElement("p"); //创建新的 <p> 元素 var node=document.

超、凢脫俗/ 2022年05月23日 11:15/ 0 赞/ 175 阅读

相关 JQuery之DOM操作详解~~添加、删除、查找、创建、复制、移动节点

![20180606184932701][] （1）创建节点 document.createElement()；//创建元素节点 document.cre

╰+哭是因爲堅強的太久メ/ 2022年05月23日 09:49/ 0 赞/ 199 阅读

相关（完全详解）JavaScript 添加、复制、移除、移动、创建和查找节点

（完全详解）JavaScript 添加、复制、移除、移动、创建和查找节点一、创建新节点 1、document.createDocumentFragment()

骑猪看日落/ 2022年05月14日 12:25/ 0 赞/ 566 阅读

相关 Js操作添加class和移除class

这种代码通常在类似tab选择的那种拥有select的就是选中的状态应用的场景还是很多的 ![watermark_type_ZmFuZ3poZW5naGVpdGk

àì夳堔傛蜴生んèń/ 2022年04月17日 03:13/ 0 赞/ 359 阅读

相关添加、移除、移动、复制、创建和查找节点

创建节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 cr

冷不防/ 2022年02月27日 17:42/ 0 赞/ 180 阅读

相关 DOM操作——怎样添加、移除、移动、复制、创建和查找节点

1.创建元素节点 document.createElement() 方法用于创建元素，接受一个参数，即要创建元素的标签名，返回创建的元素节点 1 var div = d

骑猪看日落/ 2022年02月17日 00:47/ 0 赞/ 472 阅读