JavaScript 插入Dom节点

大家好，今天我们来分享JavaScript 插入Dom节点

首先我们要知道，不管我们对Dom节点进行什么样的操作，都必须先获取这个节点，假如说，这个dom节点是空的，我们可以通过innerHTML就可以增加一个元素，假如这个dom节点不存在，那这样做就不行了，否则会造成覆盖（就是会将原先的数据改掉）

写源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>var  h1= document.getElementsByClassName('h1');var  p1= document.getElementById('p1');var  p2= document.getElementsByClassName('p2');var father =document.getElementById('father');var childrens =father.children;    //获取父节点下的所有子节点// father.firstChild// father.lastChild</script>
</body>
</html>

它的页面效果：

father.innerText=‘1’ //在该dom 节点已经有原生元素的情况下,会产生覆盖

截图：

看现在的页面：

创建新的标签，并且实现插入：

写源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p id="bs">JavaScript</p>
<div id="list"><p id="se">javase</p><p id="ee">javase</p><p id="me">javase</p></div>
<script>var bs =document.getElementById(bs);var list = document.getElementById('list');//这是已经存在的节点//接下来，我们要使用JavaScript   创建一个节点var newP = document.createElement('p');    //我们创建一个p标签newP.id = 'newP';newP.innerText='hello,shuaige';     //添加一行内容list.appendChild(newP);
</script>
</body>
</html>

网页效果：

看源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href=" " type="text/css"><script type="text/javascript" src=""></script>
</head>
<body><p id="bs">JavaScript</p>
<div id="list"><p id="se">javase</p><p id="ee">javase</p><p id="me">javase</p></div>
<script>var bs =document.getElementById(bs);var list = document.getElementById('list');//这是已经存在的节点//接下来，我们要使用JavaScript   创建一个节点var newP = document.createElement('p');    //我们创建一个p标签newP.setAttribute('id', 'newP');newP.id = 'newP';    //通过这个属性可以设置任意值newP.innerText='hello,shuaige';     //添加一行内容//list.appendChild(newP);//创建一个标签节点var myScript   =document.createElement('script');myScript.setAttribute('type','text/javascript')
</script>
</body>
</html>

显示效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href=" " type="text/css"><script type="text/javascript" src=""></script>
</head>
<body><p id="bs">JavaScript</p>
<div id="list"><p id="se">javase</p><p id="ee">javase</p><p id="me">javase</p></div>
<script>var bs =document.getElementById(bs);var list = document.getElementById('list');//这是已经存在的节点//接下来，我们要使用JavaScript   创建一个节点var newP = document.createElement('p');    //我们创建一个p标签newP.setAttribute('id', 'newP');newP.id = 'newP';newP.innerText='hello,shuaige';     //添加一行内容//list.appendChild(newP);//创建一个标签节点var myScript   =document.createElement('script');myScript.setAttribute('type','text/javascript')//可以创建style 标签var myStyle= document.createElement('style');myStyle.setAttribute('type','text/css');myStyle.innerHTML ='body{}'
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href=" " type="text/css"><script type="text/javascript" src=""></script>
</head>
<body><p id="bs">JavaScript</p>
<div id="list"><p id="se">javase</p><p id="ee">javase</p><p id="me">javase</p></div>
<script>var bs =document.getElementById(bs);var list = document.getElementById('list');//这是已经存在的节点//接下来，我们要使用JavaScript   创建一个节点var newP = document.createElement('p');    //我们创建一个p标签newP.setAttribute('id', 'newP');newP.id = 'newP';newP.innerText='hello,shuaige';     //添加一行内容//list.appendChild(newP);//创建一个标签节点var myScript   =document.createElement('script');myScript.setAttribute('type','text/javascript')//可以创建style 标签var myStyle= document.createElement('style');myStyle.setAttribute('type','text/css');myStyle.innerHTML ='body{}'document.getElementsByTagName('head')
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href=" " type="text/css"><script type="text/javascript" src=""></script>
</head>
<body><p id="bs">JavaScript</p>
<div id="list"><p id="se">javase</p><p id="ee">javase</p><p id="me">javase</p></div>
<script>var bs =document.getElementById(bs);var list = document.getElementById('list');//这是已经存在的节点//接下来，我们要使用JavaScript   创建一个节点var newP = document.createElement('p');    //我们创建一个p标签newP.setAttribute('id', 'newP');newP.id = 'newP';newP.innerText='hello,shuaige';     //添加一行内容//list.appendChild(newP);//创建一个标签节点var myScript   =document.createElement('script');myScript.setAttribute('type','text/javascript')//可以创建style 标签var myStyle= document.createElement('style');myStyle.setAttribute('type','text/css');myStyle.innerHTML ='body{background-color: aquamarine;}'document.getElementsByTagName('head')[0].appendChild(myStyle)</script>
</body>
</html>

还有一个insert

源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list"><p id="se">javase</p><p id="ee">javase</p><p id="me">javase</p><script>var ee =document('ee');var js =document('js');var list =document.getElementById('list');//要包含的节点     insertBore()list.insertBefore(js,ee);</script></div></body>
</html>

结果：

好了，有关于JavaScript 插入Dom节点就到这里了，谢谢大家

JavaScript 插入Dom节点相关推荐

【JavaScript】DOM节点-创建、插入、删除、替换、克隆节点
文章目录 DOM节点创建节点 1. 创建元素节点 2. 创建文本节点插入节点 1. appendChild() 2. insertBefore() 删除节点 1. removeChilde() 2 ...
JavaScript-操作DOM对象-创建和插入dom节点
插入节点我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了!会产生覆盖将标签追加到其他标签 ...
JavaScript插入DOM
当我们获得了某个DOM节点,想在这个DOM节点内插入新的DOM,应该如何做? 如果这个DOM节点是空的,例如,<div></div>,那么,直接使用innerHTML = '& ...
【Javascript】 DOM节点
HTML文档中一切都是节点! 整个文档是文档节点: 注释是注释节点: 每一个HTML元素都是一个元素节点: 元素内的文本内容是文本节点: 连元素的每一个属性都是一个属性节点. 看到这些是不是感觉很熟悉 ...
Javascript元编程创建DOM节点
在使用javascript创建DOM节点的过程中,难免要使用document.createElement.setAttribute. document.createTextNode等冗长.还有浏览器兼 ...
java dom 获得子元素_在JavaScript中删除DOM节点的所有子元素
我将如何删除JavaScript中DOM节点的所有子元素? 说我有以下(丑陋的)HTML: hello world 我抓住了我想要的节点,如下所示: var myNode = document.get ...
DOM节点的插入、替换、克隆及删除
插入DOM节点插入内部的尾部: 父节点.appendChild(创建节点) 插入内部的某个前面: 父节点.insertBefore(创建的节点,已知的子节点) 替换DOM节点父节点.replace ...
jQuery DOM节点操作
开发工具与关键技术:Adobe Dreamweaver JavaScript 作者:执~漠撰写时间:2020年4月22日在 HTML DOM 中,所有事物都是节点. jQuery创建节点 jQue ...
html dom节点源码,JavaScript操作HTML DOM节点的基础教程
因为 DOM 的存在,这使我们可以通过 JavaScript 来获取.创建.修改.或删除节点. NOTE:下面提供的例子中的 element 均为元素节点. 获取节点父子关系 element.par ...

JavaScript 插入Dom节点

JavaScript 插入Dom节点相关推荐

最新文章

热门文章