DOM 替换节点案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
function replaceImg(){
var divNode=document.getElementById("div1");

var newImg=document.createElement("img");
newImg.setAttribute("src","/DOM/img/timg (1).jpg");//设置src属性
newImg.setAttribute("width","100");//设置宽属性
newImg.setAttribute("height","80");//设置高属性

var docBody=document.getElementsByTagName("body");
docBody[0].replaceChild(newImg,divNode);
}
</script>
<body>
<div id="div1">div文本内容</div>
<input type="button" value="将div 替换城图片"onclick="replaceImg()" />
</body>
</html>

。。。。。。。。。

时间： 2024-10-31 14:26:53

DOM 替换节点案例的相关文章

DOM 复制节点案例

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> function copyDiv(flag){ var divNode=document.getElementById("div1");

Unit03： 增加、删除和替换节点 、 常用 HTML DOM 对象

[创建和删除节点] 1.如何创建节点:(创建元素节点)3步: 1.先创建空元素对象: var newElem=document.createElement("标签名"); 2.设置必要属性: newElem.属性名="值"; newElem.innerHTML="文本"; 3.将新元素对象挂载到指定父元素下: - 追加:parent.appendChild(newElem); ***只有向已经存在页面中的元素追加新节点才会渲染: - 插入:par

JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)

利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对象 * 2.getElementsByName(): 通过标签中的name属性值来获取该标签对象集合 * 3.getElementsByTagName(): 通过标签名来获取该标签对象集合 现在来看看相对获取的方式: ※※二.相对获取(利用节点之间的层次关系),获取节点:-Node 1.父节点:pa

JavaScript的DOM操作(节点操作)

创建节点createElement()var node = document.createElement("div");没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(document)里. 2.创建文本节点createTextNode()var value = document.createTextNode("text");创建一个文本节点,常用来往元素节点里添加内容,也不会自动添加到文档里.很多人知道innerHTML,不知道这个方法,这个

DOM树节点和事件

一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点    DOM节点分为三大类: 元素节点,属性节点,文本节点     文本节点,属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:     可以使用getElement系列方法,取到元素节点 .      1.查看元素节点      getElementById: 通过ID取到唯一节点.如果id重名,则id只能取到第一个      ge

DOM替换replaceWith()和replaceAll()

DOM替换replaceWith()和replaceAll() 之前学习了节点的内插入.外插入以及删除方法,这节会学习替换方法replaceWith .replaceWith( newContent ):用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合 简单来说:用$()选择节点A,调用replaceWith方法,传入一个新的内容B(HTML字符串,DOM元素,或者jQuery对象)用来替换选中的节点A 看个简单的例子:一段HTML代码 <div> <p>第一段<

JavaScript之DOM-5 增加、删除和替换节点(创建节点、插入节点、删除和替换节点)

一.创建节点 创建元素 - 使用如下方法可以创建一个新的元素节点: - document.createElement('元素名'); 创建文本节点 - 使用如下方法可以创建一个新的元素节点: - document.createTextNode('text'); 创建注释 - 使用如下方法可以创建一个HTML注释节点: - document.createComment('comment'); 创建文档片段 - 使用如下方法可以创建一个文档片段: - document.createDocumentF

dom操作节点之常用方法

DOM:获取节点:{1. document.getElementById (元素id):通过元素id找到节点2. document.getElementsByClassName (元素类名className): 通过class类名找到节点,返回的是一个集合3. document.getElementsByTagName (标签名):通过标签名找到节点,返回一个集合 标签名:如<a>\ <p>\ <div> ....4. document.getElementsByNam

JavaScript基础及函数，BOM，DOM的节点及DOM节点操作

使用js的三种方式 1.直接在HTML标签中,使用事件属性,调用js代码: <button onclick="alert('点我呀')">点我啊!<tton> 2.在页面的任意位置,使用script标签 <script type="text/javascript"> alert('哈哈哈') </script> 3.外部:使用script标签 src属性选择外部地址, type属性选择"text/javasc