jQuery - 요소 추가[append()는 선택한 요소의 끝에 내용을 삽입하고,prepend()는 선택한 요소의 시작에 내용after() - 선택한 요소 뒤에 내용before() - 피] 삽입
jQuery를 통해 새로운 요소/내용을 쉽게 추가할 수 있습니다.
새 HTML 내용 추가
새 컨텐트를 추가하는 데 사용되는 네 가지 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을 생성하거나 자바스크립트 코드와 DOM 요소를 만들 수 있습니다.
아래의 예에서 우리는 몇 개의 새로운 요소를 만들었다.이러한 요소는 text/HTML, jQuery 또는 JavaScript/DOM을 통해 만들 수 있습니다.그리고 우리는 append () 방법을 통해 이 새로운 요소들을 텍스트에 추가합니다 (prepend () 에도 유효합니다.
인스턴스
function appendText()
{
var txt1="
Text.
"; //Create element with HTMLvar txt2=$("").text("Text."); //Create with jQuery
var txt3=document.createElement("p"); //Create with DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); //Append the new elements
}
시도해 보십시오.
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을 통해 만들 수 있습니다.그리고 우리는 애프터 () 방법을 통해 이 새로운 요소들을 텍스트에 삽입합니다. (before ()에도 유효합니다.)
인스턴스
function afterText()
{
var txt1="I "; //Create element with HTML
var txt2=$("").text("love "); //Create with jQuery
var txt3=document.createElement("big"); //Create with DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); //Insert new elements after img
}
시도해 보십시오.
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function afterText()
{
var txt1="<b>I </b>"; // Create element with HTML
var txt2=$("<i></i>").text("love "); // Create with jQuery
var txt3=document.createElement("big"); // Create with DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // Insert new elements after img
}
</script>
</head>
<body>
<img src="/images/logo.png" >
<br><br>
<button onclick="afterText()">Insert after</button>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
