การจัดการ DOM ด้วย jQuery - 2

บทนำและ append

<button id="add">
     Add New Item
</button>		
<div id="target"></div>

<script>
  
/*
  Listen for an element with 
  the add id click
  */
  $('#add').click(function(){

  /*
  append '<p>This is the appended 
  text</p>' to #target element
  */
  $("#target").append("<p>Appended text</p>");
})
</script>

append

prepend

<div id="target"></div>

<button id="add">
     Add New Item
</button>		

<script>

/*
Listen for an element 
with the add id click
*/
$('#add').click(function(){

 /* append '<p>This is the prepended text</p>' 
    to #target element
*/
   $("#target").prepend("<p>This is the appended text</p>");
})

</script>

คำถาม

ตัวอย่าง

<div id="test">
     <p>initial paragraph</p>
</div>

เมธอด after - before

<div id="test">
     <p>initial paragraph</p>
</div>

<script>
$('#test').before('<p>I am before the #test element</p>');
$('#test').after('<p>I am after the #test element</p>');
</script>

การแทรกหลายรายการ

<p>
<span id="target"></span>
</p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';

/*
The following four methods work 
with the same logic and take 
more than one argument.
*/

 $('#target').before(firstNode, secondNode, thirdNode);
 $('#target').after(firstNode, secondNode, thirdNode);
 $('#target').append(firstNode, secondNode, thirdNode);
 $('#target').prepend(firstNode, secondNode, thirdNode);

</script>

ตัวอย่างการเชื่อมเมธอด

<p id="test"></p>

<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';

/*
We made our code shorter.
Also, we have done the select operation 
on the DOM only once instead of twice.
*/
$('#test').before(firstNode, secondNode, thirdNode)
	    .after(firstNode, secondNode, thirdNode);

</script>

เมธอด wrap

<div id="target"></div>

<script>
/*
When we apply the code below. 
The node we assigned as an argument 
will come around our target element.
*/
$("#target").wrap('<div class="container">Container wrapped the target element</div>');

//The result will be as follows
/*
<div class="container">
  Container wrapper the target element
  <div id="target">
  </div>
</div>
*/
</script>

Question

เมธอด unwrap

const $ = (selector) => ({
    unwrap: () => console.log(`Unwrapped ${selector}`)
});
$("#target").unwrap();

เมธอด empty

// Removes all descendants of the element from the DOM.
// (Simulated for Node.js environment)
const $ = (selector) => ({
  empty: () => console.log(`Removed all descendants of ${selector}`)
});
$("#target").empty();

เมธอด remove()

/*
Removes the element and 
all descendants of the element from the DOM.
*/
$('#target').remove();

ขอแสดงความยินดี