jQueryタグ要素/内容の追加
12652 ワード
jQueryにより、新しい要素/コンテンツを容易に追加することができる.新しいコンテンツを追加するための4つのjQueryメソッドについて学習します.
append()-選択要素の末尾にコンテンツprepend()-選択要素の先頭にコンテンツafter()-選択要素の後にコンテンツbefore()-選択要素の前にコンテンツjQuery append()メソッド.
append()メソッド選択された要素の最後にコンテンツを挿入$("p").append(" ");
操作前後のコード比較前:
。後: 。 。
prepend()メソッド選択された要素の先頭にコンテンツを挿入$("p").prepend(" ");
操作前後のコード比較前:
。後:
after()およびbefore()メソッドjQuery after()メソッドは、選択された要素の後にコンテンツを挿入する.jQuery before()メソッドは、選択された要素の前にコンテンツを挿入する.$("img").after(" ");
$("img").before(" ");
結果:
<b> b><img src="/images/logo.png"><i> i>
after()とbefore()の方法でいくつかの新しい要素を追加します.after()およびbefore()の方法は、パラメータによって無限数の新しい要素を受信することができる.新しい要素は、text/HTML、jQuery、またはJavaScript/DOMによって作成することができる.次の例では、いくつかの新しい要素を作成します.これらの要素は、
text/HTML、jQuery、またはJavaScript/DOMによって作成することができる.次に、after()の方法でこれらの新しい要素をテキストに挿入します(before()に対しても同様に有効です):挿入前
<html>
<head>
<meta charset="utf-8">
<title> (runoob.com)title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
script>
<script>
function afterText(){
var txt1="I "; // HTML
var txt2=$("").text("love "); // jQuery
var txt3=document.createElement("big"); // DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); //
}
script>
head>
<body>
<img src="/images/logo2.png" >
<br><br>
<button onclick="afterText()"> button>
body>
html>
挿入後
<body style="">
<img src="/images/logo2.png">
<b>I b>
<i>love i>
<big>jQuery!big>
<br><br>
<button onclick="afterText()"> button>
body>