目標：2021年2月起，每周一篇文章翻譯，從跟程式相關的短文/新聞開始，過程中也會接觸到程式專有名詞，能試著自己詮釋加強概念。4月起主題，從SOLOLEARN平台做JavaScript篇章的翻譯，11月全部完成。12月起主題，從SOLOLEARN平台做jQuery篇章的翻譯。

■□■ Jan, Week 2 ■□■ Title: jQuery Author、Platform: SOLOLEARN Source: https://www.sololearn.com/learning/1082

Adding Content

新增內容

As we have seen in the previous lessons, the html() and text() methods can be used to get and set the content of a selected element. However, when these methods are used to set content, the existing content is lost.
jQuery has methods that are used to add new content to a selected element without deleting the existing content:

如同我們前面的課程中已看過的，html()和text()方法可以被用來取得和設定選取元素的內容，然而，當使用這些方法去設定內容時，存在的內容會遺失。jQuery有其他的方法可以增加新內容到所選取的元素中，而不會刪除已存在的內容：
append() inserts content at the end of the selected elements.
prepend() inserts content at the beginning of the selected elements.
after() inserts content after the selected elements.
before() inserts content before the selected elements.

append() 在所選取元素的結尾(end)插入內容
prepend() 在所選取元素的開頭(beginning)插入內容
after() 在所選取元素的後面插入內容
before() 在所選取元素的前面插入內容

TIP:Let's see them in action!

提示：我們來看看他們的運作。

-----

Adding Content

新增內容

The append() method inserts content AT THE END of the selected HTML element. For example:

append()方法在所選取元素的結尾(end)插入內容，例如：
HTML:

<p id="demo">Hi </p>

JS:

$(function() {
$("#demo").append("David");
});
//Outputs "Hi David"
TIP:Similarly, the prepend() method inserts content AT THE BEGINNING of the selected element. You can also use HTML markup for the content.

提示：同樣地，prepend() 方法是在所選取元素的開頭(begining)插入內容。你也可以使用HTML標籤寫內容。(連接不會有空格，有需要自己加)

-----

Adding Content

新增內容

The jQuery after() and before() methods insert content AFTER and BEFORE the selected HTML element. For example:

jQuery的after()和before()方法在所選取元素後面(AFTER)和前面(BEFORE)插入內容，例如：

HTML:

<p id="demo">Hi</p>

JS:

$(function() {
$("#demo").before("<i>Some Title</i>");
$("#demo").after("<b>Welcome</b>");
});
TIP:Tap Try It Yourself to play around with the code!

提示：按一下Try It Yourself去玩玩看程式碼！

-----

Adding New Elements

增加新元素

The append(), prepend(), before() and after() methods can also be used to add newly created elements. The easiest way of creating a new HTML element with jQuery is the following:

append()、prepend()、before()和after()方法也可以用來增加新建的元素，最簡單使用jQuery來新增HTML元素的方式是這樣：

var txt = $("<p></p>").text("Hi");

The code above creates a new <p> element, which contains the text Hi and assigns it to a variable called txt.
Now, we can use that variable as a parameter of the above mentioned methods to add it to our HTML, for example:

上面的程式碼新增一個新的<p>元素，它包含文字Hi並指派給一個稱作txt的變數。
現在，我們可以把那個變數當作參數，使用上方提到的方法將它增加到我們的HTML，例如：

HTML:

<p id="demo">Hello</p>

JS:

$(function() { var txt = $("<p></p>").text("Hi"); $("#demo").after(txt); })

This will insert the newly created <p> element after the #demo paragraph.
You can also specify multiple elements as arguments for the before(), after(), append(), prepend() methods by separating them using commas:

這會將新增的<p>元素插入到#demo段落之後，你也可以指定多個元素當參數到before()、after()、append()和prepend()方法，使用逗號分隔參數：

$("#demo").append(var1, var2, var3).
TIP:The above mentioned syntax for creating elements can be used to create any new HTML element, for example $("<div></div>") creates a new div.

提示：上面提到新增元素的語法可以被用在新增任何HTML元素，例如$("<div></div>")新增一個新的div。

-----

翻譯小心得｜ 這個單元也把新增的方法介紹得很詳細，只有最後那個多參數的部分，比較沒有詳細的說明，應該是要讓學習者透過實際的練習感受不同的效果吧? 可以注意新增的是<p>標籤，所以有換行的效果，但第2個參數開始，就跟在同一行了喔！ Finally, the article above is from SOLOLEARN .  I translated it just for practice, personal use only. If that is inappropriate, please contact me.
 This free site is ad-supported. Learn more
​