Cara menggunakan append in javascript

Question

Hallo sobat program, alhamdulilah masih diberikan kesehatan dan masih dapat bertemu kembali dengan saya rizal dan masih diwebsite dumetschool yang sangat luar biasa ini. Pada kesempatan kali ini saya akan membahas salah satu fungsi yang ada pada jQuery.

Salah satu fungsi pada jQuery yang ingin saya bahas adalah fungsi .append(), dari kalimat diatas maka saya berikan judul untuk artikel kali ini yaitu Cara Penggunaan Fungsi .append() pada jQuery. fungsi append() pada jquery adalah untuk memanipulasi elemen HTML dan append ini bertujuan untuk menyisipkan sebuah elemen kedalam elemen.

Untuk lebih jelasnya mari kita praktekan, pertama jalankan atau run text-editornya kemudian ketiklah kode HTML nya seperti dibawah ini :

Pada kode diatas saya membuat sebuah elemen p dengan class didalam div id kotak, nantinya diantara elemen p dengan class tsb yang nantinya kita sisipkan elemen baru. Oke lanjut langkah selanjutnya tambahkan style css seperti dibawah ini :

Oke, kemudian langkah terakhir teman-teman tambahkan kode jquery beserta library nya seperti pada gambar dibawah ini :

Jika sudah maka silahkan teman-teman jalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan terlihat seperti pada gambar dibawah ini :

Bagaimana ? mudah kan teman – teman tentang Cara Penggunaan Fungsi .append() pada jQuery. dan untuk pengembangannya nanti akan saya bahas di pembahasan selanjutnya atau teman-teman ingin mencoba sendiri silahkan.

Oke kalau begitu cukup sekian dipembahasan kali ini tentang Cara Penggunaan Fungsi .append() pada jQuery. semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

Saya mencoba menambahkan blok teks yang besar menggunakan append jquery ().

$('#add_contact_btn').click(function(event) {
    event.preventDefault();

    var large = '<div class="accordian_container"><a href="#" class="accordian_trigger"><h4>Co-Borrower Information</h4></a><hr/><div class="accordian_item" id="accord_item_2"><label> First Name</label><br/><input type="text"/><br/><label>Middle Name</label><br/>
            <input type="text"/><br/>
            <label>Last Name</label><br/>
            <input type="text" /><br/>
            <label>Home Number</label><br/>
            <input type="text"/><br>
            <label>Work Number</label><br/>
            <input type="text"/><br>
            <label>Cell Number</label><br/>
            <input type="text"/><br>
            </div>
            </div>';

    $('#accordion_container').append(large);



});

Tampaknya tidak berfungsi dan setelah melihat dokumentasi untuk append (), saya tidak tahu mengapa - ada ide? Apakah ini jumlah besar HTML yang saya coba tambahkan?

Hapus jeda baris.

http://jsfiddle.net/DmERt/

var large = '<div class="accordian_container"><a href="#" class="accordian_trigger"><h4>Co-Borrower Information</h4></a><hr/><div class="accordian_item" id="accord_item_2"><label> First Name</label><br/><input type="text"/><br/><label>Middle Name</label><br/><input type="text"/><br/><label>Last Name</label><br/><input type="text" /><br/><label>Home Number</label><br/><input type="text"/><br><label>Work Number</label><br/><input type="text"/><br><label>Cell Number</label><br/><input type="text"/><br></div></div>';

$('#accordion_container').append(large);

Javascript tidak memiliki string multiline dalam cara Anda menulisnya, Anda tidak bisa hanya membuka string pada satu baris, turun beberapa baris dan kemudian tutup. (ada beberapa cara melakukan string multi-line di JS, tetapi mereka agak mundur).

Cara kebanyakan orang melakukannya adalah seperti ini:

var myString = '<p>Line One</p>' +
'<p>Line Two</p>' +
'<p>Line Three</p>';

Perhatikan bahwa jawaban di atas sudah tua dan tidak lagi sepenuhnya benar. Karena ES6 menjadi lebih umum, dan semakin banyak orang yang melakukan transile dari ES6, kami semakin dapat menggunakan literal templat, yang dapat digunakan sebagai string multiline:

var myString = `<p>Line One</p>
<p>Line Two</p>
<p>Line Three</p>`;

Anda harus membuat templat dalam HTML yang disembunyikan, lalu menambahkan kontennya HTML. Sebagai contoh:

<div class="hide" id="template">
  <b>Some HTML</b>
</div>

jQuery:

$("#container").append($("#template").html());

Menempatkan HTML dalam string JavaScript lebih sulit dibaca dan dicari, rawan kesalahan dan IDE Anda akan kesulitan untuk memformatnya dengan benar.

Ini pemahaman saya bahwa jika Anda ingin meletakkan string panjang Anda di beberapa baris yang lebih efisien untuk menggunakan array string dan bergabung dengan mereka.

var bigString = [
    'some long text here',
    'more long text here',
    '...'
];
$('#accordion_container').append(bigString.join(''));

Anda juga dapat mengkloning div dengan jQuery dan kemudian menambahkan clone - jauh lebih tidak berantakan.

var accordionClone = $('.accordion_container').clone();
$('#accordion_container').append(accordionClone);

cukup tambahkan seperti ini $ (# element) .append (large_html), large_html dalam karakter khusus (``) dan terima kasih nanti.

Secara default, kode HTML yang mengandung wraps tidak dapat digunakan dengan append/prepend secara langsung menggunakan 'or". Namun saat ini ada metode berikut untuk melakukan itu:

Gunakan "+" untuk bergabung dengan potongan kode HTML.
Gunakan "\" untuk melarikan diri.
Gunakan "` "(centang kembali, Aksen kubur ), tidak memerlukan operasi tambahan . Metode ini didukung dari ES2015/ES6 ( Template literals ).
Tambahkan tag tersembunyi yang berisi kode HTML yang sama yang Anda butuhkan, mis. <p id="foo" style="display:none;">, lalu gunakan.append($('#foo').html());.
Sekarang poskan beberapa skenario penggunaan ke first three methods yang diuraikan di atas (jalankan di konsol Chrome browser.):

Kita bisa melihat perbedaan mereka dengan jelas.

Jika jeda baris adalah masalah, gunakan innerHTML, berfungsi di setiap browser sejak IE5:

$('#accordion_container')[0].innerHTML += large;

Atau, untuk koleksi:

$('.accordion_container').forEach(function () {
    this.innerHTML += large;
});

Javascript memiliki opsi untuk memperluas beberapa baris/bagian HTML menjadi satu baris, untuk setiap baris dari baris HTML tambahkan backslash () untuk mengidentifikasi bahwa itu melanjutkan baris.

Note: -Satu-satunya hal yang perlu dipertimbangkan saat menambahkan baris adalah kutipan tunggal dan kutipan ganda. Jika Anda mulai dengan kutipan tunggal, maka gunakan penawaran ganda dalam string internal atau sebaliknya, jika tidak, baris terputus dan tidak mendapatkan hasil yang tepat.

$(element).append('<div class="content"><div class="left"></div><div class="right"></div></div>');

Sintaksis Javascript

 var str = ' <div class="content"> \
<div class="left"> \
</div> \
<div class="right"> \
</div> \
</div> ';

 document.getElementsByName(str).html(str);
 //or
 document.getElementsById(str).html(str);

Sintaks Jquery

 $(element).append(' \
  <div class="content"> \
    <div class="left"> \
    </div> \
    <div class="right"> \
    </div> \
  </div> \
');

Atau Anda dapat menggunakan templat html untuk ini sebagaimana disebutkan di tautan ke-3 melalui jquery

$("#div").load("/html_template.html");

http://www.no-margin-for-errors.com/blog/2010/06/17/javascript-tip-of-the-day-extending-a-string-across-multiple-lines/

Menambahkan beberapa elemen html menggunakan Jquery

sebarkan html dalam banyak baris javascript

Apa itu append di javascript?

Fungsi append adalah untuk menambahkan item di akhir list dengan bahana pemrograman tingkat tinggi.

Append digunakan untuk apa?

Fungsi append menambahkan nilai array pada urutan akhir.

kode javascript Append Python Before after javascript jQuery before jQuery empty HTML

Cara menggunakan append in javascript

Apa itu append di javascript?

Append digunakan untuk apa?

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social