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

超、凢脫俗 2022-05-23 11:15 219阅读 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 条评论，219人围观）

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

相关阅读

相关 hadoop正确地添加和移除节点

添加节点克隆克隆一台全新的Linux（如有IP冲突，可右击VMware右下角网络图标断开连接）打开/etc/hostname修改主机名打开/etc/sy

素颜马尾好姑娘i/ 2023年06月29日 05:39/ 0 赞/ 29 阅读

相关 JavaScript面试题-JavaScript 怎样添加移除移动复制创建查找节点？

JavaScript 怎样添加移除移动复制创建查找节点 1. 创建节点 createDocumentFragment()//创建一个DOM片段

「爱情、让人受尽委屈。」/ 2023年06月14日 13:57/ 0 赞/ 18 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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