jQuery-要素の追加

2017-09-16 W 3 school-jQuery-追加要素は、自分のシステム的な基礎を築くのを助け、メモを取ると同時に自分の余分な収穫を追加することができます.
jQueryでは、新しい要素/コンテンツを簡単に追加できます.
新しいHTMLコンテンツの追加
新しいコンテンツを追加するための4つのjQueryメソッドについて学習します.

append()-選択された要素の最後にコンテンツ

を挿入する.

prepend()-選択要素の先頭にコンテンツ

を挿入する.

after()-選択要素の後にコンテンツ

を挿入する.

before()-選択された要素の前にコンテンツ

を挿入する.
jQuery append()メソッド
jQuery append()メソッドは、選択された要素の最後にコンテンツを挿入します.$("p").append("Some appended text.");
jQuery prepend()メソッド
jQuery prepend()メソッドは、選択された要素の先頭にコンテンツを挿入します.$("p").prepend("Some prepended text.");
上記の例では、append()およびprepend()メソッドでいくつかの新しい要素を追加し、選択された要素の先頭/末尾にのみテキスト/HTMLを挿入します.しかしながら、append()およびprepend()メソッドは、パラメータによって無限数の新しい要素を受信することができる.jQueryでテキスト/HTML(上記の例のように)を生成したり、JavaScriptコードやDOM要素を生成したりすることができます.次の例では、いくつかの新しい要素を作成します.これらの要素はtext/HTML、jQuery、またはJavaScript/DOMで作成できます.次にappend()メソッドを使用して、これらの新しい要素をテキストに追加します(prepend()にも有効です):

function appendText()
{
var txt1="
Text.
";               //   HTML      
var txt2=$("").text("Text.");   //   jQuery      
var txt3=document.createElement("p");  //   DOM      
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         //      
}

jQuery after()とbefore()メソッド
jQuery after()メソッドは、選択された要素の後にコンテンツを挿入します.jQuery before()メソッドは、選択された要素の前にコンテンツを挿入します.

$("img").after("Some text after");
$("img").before("Some text before");

after()とbefore()メソッドでいくつかの新しい要素を追加
after()およびbefore()メソッドは、パラメータによって無限数の新しい要素を受信することができる.新しい要素はtext/HTML、jQuery、またはJavaScript/DOMで作成できます.次の例では、いくつかの新しい要素を作成します.これらの要素はtext/HTML、jQuery、またはJavaScript/DOMで作成できます.次にafter()メソッドでこれらの新しい要素をテキストに挿入します(before()にも有効です):

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);          //   img        
}