JQ 替换节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>

<title></title>

<script src="Scripts/jquery-1.4.1.js"
type="text/javascript"></script>

<script type="text/javascript">
$(function() {

$("#replace").click(function() {

$("br").replaceWith("<hr/>"); //将所有br替换为hr

$("p").wrap("<font color=‘red‘></font>");
//用红色样式将p标签给包起来

//<font color=‘red‘> <p> 用特定的样式包起来</p></font>

});
})
</script>

</head>
<body>
sdfsdfsdfrgrefg<br />

sdfsdfsdfrgrefg<br />
sdfsdfsdfrgrefg<br />

sdfsdfsdfrgrefg<br />
sdfsdfsdfrgrefg<br />

sdfsdfsdfrgrefg<br />
<p>
用特定的样式包起来</p>

<p>
用特定的样式包起来</p>
<p>
用特定的样式包起来</p>

<p>
用特定的样式包起来</p>
<input type="button"
value="ReplaceWith" id="replace"
/>
</body>
</html>

时间： 2024-10-08 20:50:34

JQ 替换节点的相关文章

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

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

克隆节点，替换节点

1.克隆节点介绍 2.替换节点 注意点:替换后的事件将不会存在 3.程序(克隆) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-3.2.1.min.js">

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

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

替换节点（replaceChild()）

replaceChild():方法将把一个给定父元素里面的一个子节点替换为另一个子节点: referencre = element.replaceChild(newChild,oldChild); oldChild节点必须是element元素子节点,他的返回值是一个指向已经被替换的那个子节点的引用指针. 在下例中,id属性值是content的元素还包含着一个id属性值是fineprint的元素,我们将用createElement()方法创建一个新的文本元素,再用replaceChild()方法把

替换节点

1.单点替换程序 这种效果可以看出,虽然被替换了,但是下面节点也没移动了. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(

jQuery DOM操作-复制节点、替换节点、包裹节点

clone(): 复制节点,默认无事件,如果传递了一个参数true,则表示在复制节点的同时复制元素中所绑定的事件. 1 <script type="text/javascript"> 2 $(function(){ 3 var $apple = $("ul li:eq(0)").clone(); 4 $("ul").append($apple); 5 }); 6 </script> replaceWith(): 将所有匹配

【温故而知新-JQ的节点类型】

来源:http://www.hi-docs.com/jquery/contents.html 定义和用法 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容 语法contents()例子 1 查找所有文本节点并加粗 # HTML 代码:<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p># jQuery 代码:$(&

使用jq插入节点

.append()和.appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容,而后面是要选择的对象 after()和before() after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入 before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插 .prepend(

替换节点及replaceEach方法

需求: 为所有的 li 节点添加 onclick 响应函数实现 city 子节点和 game 子节点对应位置的元素的互换 window.onload = function(){ //自定义互换两个节点的函数 function replaceEach(aNode, bNode){ //1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性 var aParent = aNode.parentNode; var bParent = bNode.parentNode; i