※ 1. add적용-before(), after()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="img2.jpg" alt="jQuery" width="300" height="300"><br><br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>
※ 1. 실행화면
실행화면1 - 클릭하시면 자세히 볼 수 있습니다.
※ 2. add적용-afeter(text)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function afterText() {
var txt1 = "<b>I </b>";
var txt2 = $("<i></i>").text("love ");
var txt3 = document.createElement("b");
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3);
}
</script>
</script>
</head>
<body>
<img src="img2.jpg" alt="jQuery" width="300" height="300">
<p>Click the button to insert text after the image.</p>
<button onclick="afterText()">Insert after</button>
</body>
</html>
※ 2. 실행화면
실행화면2 - 클릭하시면 자세히 볼 수 있습니다.