อะไรคือข้อแตกต่างระหว่าง jQuery ของ replaceWith () และ html ()

อะไรคือความแตกต่างระหว่างฟังก์ชั่น replaceWith () และ html () ของ jQuery เมื่อ HTML ถูกส่งเป็นพารามิเตอร์?

ใช้รหัส HTML นี้:

<div id="mydiv">Hello World</div>

การทำ:

$('#mydiv').html('Aloha World');

จะส่งผลให้:

<div id="mydiv">Aloha World</div>

การทำ:

$('#mydiv').replaceWith('Aloha World');

จะส่งผลให้:

Aloha World

ดังนั้นhtml ()จะแทนที่เนื้อหาขององค์ประกอบในขณะที่replaceWith ()จะแทนที่องค์ประกอบที่แท้จริง

replaceWith () จะแทนที่องค์ประกอบปัจจุบันในขณะที่ html () เพียงแค่แทนที่เนื้อหา

โปรดทราบว่า replaceWith () จะไม่ลบองค์ประกอบ แต่เพียงลบออกจาก DOM และส่งกลับมาให้คุณในคอลเลกชัน

ตัวอย่างสำหรับปีเตอร์: http://jsbin.com/ofirip/2

มีสองวิธีในการใช้ html () และ replaceWith () ฟังก์ชั่น Jquery

<div id="test_id">
   <p>My Content</p>
</div>

1. ) html () vs replaceWith ()

var html = $('#test_id p').html(); จะส่งคืน "เนื้อหาของฉัน"

แต่ var replaceWith = $('#test_id p').replaceWith();จะกลับวัตถุ DOM <p>My Content</p>ทั้ง

2. ) html ('value') vs replaceWith ('value')

$('#test_id p').html('<h1>H1 content</h1>'); จะให้คุณใส่ออกดังต่อไปนี้

<div id="test_id">
  <p><h1>H1 content</h1></p>
</div>

แต่ $('#test_id p').replaceWith('<h1>H1 content</h1>');จะทำให้คุณออกมาดังต่อไปนี้

<div id="test_id">
      <h1>H1 content</h1>
</div>

คำถามเก่า แต่อาจช่วยใครได้

มีความแตกต่างบางประการในการทำงานของฟังก์ชันเหล่านี้ใน Internet Explorer และ Chrome / Firefox หาก HTML ของคุณไม่ถูกต้อง

ทำความสะอาด HTML ของคุณและพวกเขาจะทำงานตามเอกสาร

(ไม่ปิด</center>ค่าใช้จ่ายฉันตอนเย็นของฉัน!)

นอกจากนี้ยังอาจจะมีประโยชน์ที่จะรู้ว่านอกจากนี้ยังสามารถนำมาใช้แทน.empty().append() .html()ในมาตรฐานที่แสดงด้านล่างนี้จะเร็วกว่า แต่ถ้าคุณจำเป็นต้องเรียกใช้ฟังก์ชันนี้หลายครั้ง

ดู: https://jsperf.com/jquery-html-vs-empty-append-test