Juqery Learning 5 Document Processing Wrap, Replace, Delete, Copy_jquery

wrap(html)
Wraps all matching elements with the structured markup of other elements.
This kind of wrapping is most useful for inserting additional structured markup into the document without destroying the semantic quality of the original document.
The principle of this function is to check the first element provided (which is dynamically generated by the provided HTML markup code) and find the top-level ancestor element in its code structure - this ancestor element is the wrapper element.

This function cannot be used when the element in the HTML markup code contains text. Therefore, if you want to add text, you should add it after the package is completed.

-------------------------------------------------- ------------------------------------

Wrap all matched elements with a structure of other elements.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.
This works by going through the first element provided (which is generated, on the fly , from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.

This does not work with elements that contain text. Any necessary text must be added after the wrapping is done.
Return value
jQuery

Parameters
html (String): HTML tag code string, used to dynamically generate elements and wrap the target element

Example
Wrap all paragraphs in a newly created div

HTML code:

Test Paragraph.

jQuery code:

$("p").wrap("

");
Result:

Test Paragraph.

-------------------------------------------------- -------------------------------------------------- ---------------------------------------------
wrap( elem)
Wraps all matching elements with the structured markup of other elements.

-------------------------------------------------- ------------------------------------

Wrap all matched elements with a structure of other elements.
Return value
jQuery

Parameters
elem (Element): DOM element used to wrap the target element

Example
The ID is "content "The div wraps each paragraph

HTML code:

Test Paragraph.

jQuery code:

$("p").wrap(document.getElementById('content'));
Result:

Test Paragraph.

------------------------------------------------ -------------------------------------------------- --------------------------------------------------
wrapAll(html)
Wraps all matching elements with a single element
This is different from '.wrap()', which wraps each matching element once .
This kind of wrapping is most useful for inserting additional structured markup into the document without destroying the semantic quality of the original document.

The principle of this function is to check the first element provided and find the top ancestor element in its code structure - this ancestor element is the wrapping element.

-------------------------------------------------- ------------------------------------

Wrap all the elements in the matched set into a single wrapper element.
This is different from '.wrap()' where each element in the matched set would get wrapped with an element.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.

This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.
Return value
jQuery

Parameters
html (String): TML markup code string, used to dynamically generate elements and wrap target elements

Example
Wrap all paragraphs with a generated div

HTML code:

Hello

cruel

World

jQuery code:

$("p").wrapAll("

");
Result:

Hello

cruel

World

-------------------------------------------------- -------------------------------------------------- ---------------------------------------------
wrapAll(elem)
Wrap all matching elements with a single element
This is different from '.wrap()', which wraps each matching element once.

-------------------------------------------------- ------------------------------------

Wrap all the elements in the matched set into a single wrapper element.
This is different from '.wrap()' where each element in the matched set would get wrapped with an element.
Return value
jQuery

Parameters
elem (Element): DOM element used to wrap the target element

Example
Wrap all paragraphs with a generated div

HTML code:

Hello

cruel

World

jQuery code:

$("p").wrapAll(document.createElement("div") );
Result:

Hello

cruel

World

-------------------------------------------------- -------------------------------------------------- ---------------------------------------------
wrapInner(html)
Wraps the sub-content (including text nodes) of each matching element with an HTML structure
The principle of this function is to check the first element provided (it is provided by HTML markup code is dynamically generated), and finds the top-level ancestor element in its code structure - this ancestor element is the packaging element.

-------------------------------------------------- ------------------------------------

Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document. This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.
Return value
jQuery

Parameters
html (String): HTML tag code string, used to dynamically generate elements and wrap target elements

Example
Bold each sub-content in all paragraphs

HTML code:

Hello

cruel

World

jQuery code:

$("p").wrapInner("");
Result:

Hello

cruel

World

------------------------------------------ -------------------------------------------------- -------------------------------------------------- ------
wrapInner(elem)
Wrap the sub-content (including text nodes) of each matching element with a DOM element

--------- -------------------------------------------------- ---------------------

Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
Return Value
jQuery

Parameter
elem (Element): DOM element used to wrap the target element

Example
Bold each sub-content within all paragraphs

HTML code:

Hello

cruel

World

jQuery code:

$("p ").wrapInner(document.createElement("b"));
Result:

Hello

cruel

World

-------------------------------- -------------------------------------------------- -------------------------------------------------- -------------
replaceWith(content)
Replace all matching elements with specified HTML or DOM elements.

-------------------------------------------------- ------------------------------------

Replaces all matched elements with the specified HTML or DOM elements.
Return value
jQuery

Parameters
content (String, Element, jQuery): Content used to replace matching elements

Example
Replace all paragraph marks with bold ones.

HTML code:

Hello

cruel

World

jQuery code:

$( "p").replaceWith("Paragraph. ");
Result:

Paragraph. Paragraph. Paragraph .
--------------------------------------------- -------------------------------------------------- -------------------------------------------------- --
replaceAll(selector)
Replace all elements matched by selector with matching elements.

-------------------------------------------------- ------------------------------------

Replaces the elements matched by the specified selector with the matched elements.
Return value
jQuery

Parameter
selector (selector): Used to find the element to be replaced

Example
Put all Replace the paragraph tags with bold tags

HTML code:

Hello

cruel

World

jQuery code:

$("Paragraph. ").replaceAll("p");
Result:

Paragraph. Paragraph . Paragraph.
---------------------------------- -------------------------------------------------- -------------------------------------------------- ----------
empty()
Delete all child nodes in the matching element set.

-------------------------------------------------- ------------------------------------

Remove all child nodes from the set of matched elements.
Return value
jQuery

Example
Delete all paragraph sub-elements (including text nodes)

HTML code:

Hello, Person and person

jQuery code:

$("p").empty();
Result:

---------------------------------- --- ---------------------------------- --- -------------------
remove([expr])
DOM에서 일치하는 모든 요소를 ​​제거합니다.
이 방법은 jQuery 객체에서 일치하는 요소를 제거하지 않으므로 나중에 이러한 일치 요소를 재사용할 수 있습니다.

------------------------------- ------ ----------

모두 제거
이것은 jQuery 객체에서 제거되지 않으며, 일치하는 요소를 추가로 사용할 수 있습니다.
반환 값
jQuery

매개변수
expr(문자열): (선택 사항) 요소 필터링을 위한 jQuery 표현식

예
DOM에서 모든 단락 제거

HTML 코드:

안녕하세요

잘 지내세요

jQuery 코드:

$("p").remove()
결과:

어떻게

------------------------------- -- -------------------

Put hello from the DOM 클래스 단락 삭제

HTML 코드:

안녕하세요

잘 지내세요

jQuery 코드:

$( "p").remove(".hello");
결과:

잘 지내세요

---- -------- ---------------- -------- ---------------- -------- ------
클론()
클론 DOM 요소를 일치시키고 이러한 복제본 사본을 선택합니다.
이 기능은 DOM 문서의 요소 복사본을 다른 위치에 추가하려는 경우에 유용합니다.

------------------------------- ------ ----------

클론 일치 DOM 요소를 선택하고 복제본을 선택합니다.
이는 요소의 복사본을 DOM의 다른 위치로 이동하는 데 유용합니다.
반환 값
jQuery

예
모든 b 요소를 복제합니다. 복제된 복사본을 선택하고 모든 단락 앞에 추가합니다.

HTML 코드:

안녕하세요

, 잘 지내세요?

jQuery 코드:

$("b" ).clone().prependTo("p");
결과:

안녕하세요

안녕하세요, 잘 지내세요?

------------------------------------------------ ------------------------------------- ---------------------
clone(true)
요소와 모든 해당 이벤트 핸들러를 선택하고 복제된 복사본을 선택합니다.
이 함수는 요소의 복사본을 DOM 문서의 다른 위치에 추가하려는 경우 매우 유용합니다.

------------------------------- ------ ----------

클론 일치 DOM 요소 및 해당 이벤트 핸들러를 선택하고 복제본을 선택합니다.
이는 요소 및 해당 이벤트의 복사본을
반환 값
jQuery
로 이동하는 데 유용합니다.
매개변수
true(부울): 요소의 모든 이벤트 핸들러를 복사하려면

예
자체를 복사할 수 있는 버튼을 생성하고 해당 복사본은 동일한 기능을 갖습니다.

HTML 코드:

Clone Me!
jQuery 코드:

$("button").click(function(){
$(this).clone(true).insertAfter(this)
});