jQuery を使用すると、新しい要素やコンテンツを簡単に追加できます。
新しい HTML コンテンツを追加します
新しいコンテンツを追加するための 4 つの jQuery メソッドを学習します:
append() - 選択した要素の末尾にコンテンツを挿入します
prepend () -選択した要素の先頭にコンテンツを挿入します
after() - 選択した要素の後にコンテンツを挿入します
before() - 選択した要素の前にコンテンツを挿入します
jQuery append()メソッド
jQueryのappend()メソッドは、選択した要素の末尾にコンテンツを挿入します。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>追加文本</b>。");
});
$("#btn2").click(function(){
$("ol").append("<li>追加列表项</li>");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>プログラムを実行して試してみましょう
jQuery prepend() メソッド
jQuery prepend() メソッドは、選択した要素の先頭にコンテンツを挿入します。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>在开头追加文本</b>。 ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>在开头添加列表项</li>");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>プログラムを実行して試してみましょう
append() メソッドと prepend() メソッドを通じていくつかの新しい要素を追加します
上記の例では、いくつかの新しい要素を追加するだけです選択した要素の先頭に要素 / 末尾にテキストを挿入 / HTML を挿入します。
ただし、append() メソッドと prepend() メソッドは、パラメーターを介して無制限の数の新しい要素を受け取ることができます。テキスト/HTML は、jQuery (上の例のように)、または JavaScript コードと DOM 要素を介して生成できます。
以下の例では、いくつかの新しい要素を作成します。これらの要素は、text/HTML、jQuery、または JavaScript/DOM を使用して作成できます。次に、append() メソッドを使用してこれらの新しい要素をテキストに追加します (prepend() にも有効):
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText(){
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
</head>
<body>
<p>这是一个段落。</p>
<button onclick="appendText()">追加文本</button>
</body>
</html>プログラムを実行して試してください
jQueryのafter()メソッドとbefore()メソッド
jQueryのafter()メソッドは、選択した要素の後にコンテンツを挿入します。
jQuery before() メソッドは、選択した要素の前にコンテンツを挿入します。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>之前</b>");
});
$("#btn2").click(function(){
$("img").after("<i>之后</i>");
});
});
</script>
</head>
<body>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" height="150" width="150">
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>プログラムを実行して試してみましょう
after() メソッドと before() メソッドを通じていくつかの新しい要素を追加します
after() メソッドと before() メソッドは受け取ることができますパラメータによる新しい要素の数は無制限です。新しい要素は、text/HTML、jQuery、または JavaScript/DOM 経由で作成できます。
以下の例では、いくつかの新しい要素を作成します。これらの要素は、text/HTML、jQuery、または JavaScript/DOM を使用して作成できます。次に、これらの新しい要素を after() メソッドを通じてテキストに挿入します (before() にも有効):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function afterText(){
var txt1="<b>I </b>"; // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本
}
</script>
</head>
<body>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" height="150" width="150">
<br><br>
<button onclick="afterText()">之后插入</button>
</body>
</html>プログラムを実行して試してみましょう
