jquery修改/追加/删除html网页中的内容示例
[導讀] 本文章來介紹利用jquery中的html()來動態替換修改html標簽中的內容的實例,有需要了解的同學不防進入參考,jquery html相當于js innerHTML方法哦,具體如下。$(selector) html(content) html() 函數改變所匹
本文章來介紹利用jquery中的html()來動態替換修改html標簽中的內容的實例,有需要了解的同學不防進入參考,jquery html相當于js innerHTML方法哦,具體如下。
$(selector).html(content)
html() 函數改變所匹配的 HTML 元素的內容(innerHTML)。
代碼如下 復制代碼
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").html("Eiege.com——jquery專欄");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">請點擊這里</button>
</body>
</html>
append() 函數向所匹配的 HTML 元素內部追加內容。
代碼如下 復制代碼 <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(" <b>Eiege.com</b>.");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">請點擊這里</button>
</body>
</html>$(selector).prepend(content)
prepend() 函數向所匹配的 HTML 元素內部預置(Prepend)內容。
代碼如下 復制代碼 $("p").prepend(www.hzhuti.com);
$(selector).after(content)
after() 函數在所有匹配的元素之后插入 HTML 內容。
代碼如下 復制代碼
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").after(" Eiege.com");
});
});
</script>
</head><body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">請點擊這里</button>
</body></html>
些方法對于 XML 文檔和 HTML 文檔均是適用的,除了:html()。方法 描述
addClass() 向匹配的元素添加指定的類名。
after() 在匹配的元素之后插入內容。
append() 向匹配的元素內部追加內容。
appendTo() 向匹配的元素內部追加內容。
attr() 設置或返回匹配元素的屬性和值。
before() 在每個匹配的元素之前插入內容。
clone() 創建匹配元素集合的副本。
detach() 從 DOM 中移除匹配元素集合。
empty() 刪除匹配的元素集合中所有的子節點。
hasClass() 檢查匹配的元素是否擁有指定的類。
html() 設置或返回匹配的元素集合中的 HTML 內容。
insertAfter() 把匹配的元素插入到另一個指定的元素集合的后面。
insertBefore() 把匹配的元素插入到另一個指定的元素集合的前面。
prepend() 向每個匹配的元素內部前置內容。
prependTo() 向每個匹配的元素內部前置內容。
remove() 移除所有匹配的元素。
removeAttr() 從所有匹配的元素中移除指定的屬性。
removeClass() 從所有匹配的元素中刪除全部或者指定的類。
replaceAll() 用匹配的元素替換所有匹配到的元素。
replaceWith() 用新內容替換匹配的元素。
text() 設置或返回匹配元素的內容。
toggleClass() 從匹配的元素中添加或刪除一個類。
unwrap() 移除并替換指定元素的父元素。
val() 設置或返回匹配元素的值。
wrap() 把匹配的元素用指定的內容或元素包裹起來。
wrapAll() 把所有匹配的元素用指定的內容或元素包裹起來。
wrapinner() 將每一個匹配的元素的子內容用指定的內容或元素包裹起來。