Penggunaan fungsi CLASSNAME pada PHP

• Cari disini...
• Browse

  • Katalog Kelas

    Ikuti materi yang kamu butuhkan

  • Roadmap

    Belajar online dengan terarah

  • Bootcamp

    Codepolitan x Catamyst

• Explore

  • Tutorial & Artikel

    Temukan Artikel menarik

  • Podcast

    Podcast seputar pemrograman

  • Webinar

    Ikuti Berbagai Webinar

  • Event

    Temukan Event menarik

  • Beasiswa

    Program Beasiswa

  • Discord

    Komunitas Discord

  • Forum

    Diskusi antar Programmer

  • Leaderboard

    Ranking siswa Codepolitan

• Flashsale
• Partnership

  • For Company

    Solusi tepat untuk perusahaan

  • For School

    Kerjasama untuk sekolah

  • For Campus

    Kerjasama untuk kampus

  • For Mentor

    Peluang penghasilan untuk mentor

• Career

LoginRegister

Saya refactoring beberapa kode JavaScript lama dan ada banyak manipulasi DOM yang terjadi.

var d = document;
var odv = d.createElement("div");
odv.style.display = "none";
this.OuterDiv = odv;

var t = d.createElement("table");
t.cellSpacing = 0;
t.className = "text";
odv.appendChild(t);

Saya ingin tahu apakah ada cara yang lebih baik untuk melakukan ini menggunakan jQuery. Saya telah bereksperimen dengan:

var odv = $.create("div");
$.append(odv);
// And many more

Tetapi saya tidak yakin apakah ini lebih baik.

inilah contoh Anda di baris "satu".

this.$OuterDiv = $('<div></div>')
    .hide()
    .append($('<table></table>')
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

Perbarui: Saya pikir saya akan memperbarui posting ini karena masih mendapat sedikit lalu lintas. Dalam komentar di bawah ini ada beberapa diskusi tentang $("<div>") vs $("<div></div>") vs $(document.createElement('div')) sebagai cara membuat elemen baru, dan mana yang "terbaik".

Saya mengumpulkan patokan kecil , dan inilah kira-kira hasil mengulangi opsi di atas 100.000 kali:

jQuery 1.4, 1.5, 1.6

               Chrome 11  Firefox 4   IE9
<div>            440ms      640ms    460ms
<div></div>      420ms      650ms    480ms
createElement    100ms      180ms    300ms

jQuery 1.3

                Chrome 11
<div>             770ms
<div></div>      3800ms
createElement     100ms

jQuery 1.2

                Chrome 11
<div>            3500ms
<div></div>      3500ms
createElement     100ms

Saya pikir ini bukan kejutan besar, tetapi document.createElement adalah metode tercepat. Tentu saja, sebelum Anda pergi dan mulai refactoring seluruh basis kode Anda, ingatlah bahwa perbedaan yang kita bicarakan di sini (dalam semua kecuali versi kuno dari jQuery) menyamakan sekitar 3 milidetik tambahan per seribu elemen .

Pembaruan 2

Diperbarui untuk jQuery 1.7.2 dan menempatkan patokan pada JSBen.ch yang mungkin sedikit lebih ilmiah daripada tolok ukur primitif saya, ditambah itu dapat di-crowdsourced sekarang!

http://jsben.ch/#/ARUtz

Cukup dengan memasok elemen HTML yang ingin Anda tambahkan ke konstruktor jQuery $() akan mengembalikan objek jQuery dari HTML yang baru dibangun, cocok untuk ditambahkan ke DOM menggunakan metode append() jQuery.

Sebagai contoh:

var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);

Anda bisa mengisi tabel ini secara terprogram, jika mau.

Ini memberi Anda kemampuan untuk menentukan sembarang HTML yang Anda suka, termasuk nama kelas atau atribut lainnya, yang mungkin Anda temukan lebih ringkas daripada menggunakan createElement dan kemudian menyetel atribut seperti cellSpacing dan className melalui JS.

Saya melakukan seperti itu:

$('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');

sejak jQuery1.8, menggunakan $.parseHTML() untuk membuat elemen adalah pilihan yang lebih baik.

ada dua manfaat:

1.Jika Anda menggunakan cara lama, yang mungkin seperti $(string), jQuery akan memeriksa string untuk memastikan Anda ingin memilih tag html atau membuat elemen baru. Dengan menggunakan $.parseHTML(), Anda memberi tahu jQuery bahwa Anda ingin membuat elemen baru secara eksplisit, sehingga kinerjanya mungkin sedikit lebih baik.

2.Hal yang lebih penting adalah Anda mungkin menderita serangan lintas situs ( info lebih lanjut ) jika Anda menggunakan cara lama. jika Anda memiliki sesuatu seperti:

    var userInput = window.Prompt("please enter selector");
    $(userInput).hide();

orang jahat dapat memasukkan <script src="xss-attach.js"></script> untuk menggoda Anda. untungnya, $.parseHTML() menghindari rasa malu ini untuk Anda:

var a = $('<div>')
// a is [<div>​</div>​]
var b = $.parseHTML('<div>')
// b is [<div>​</div>​]
$('<script src="xss-attach.js"></script>')
// jQuery returns [<script src=​"xss-attach.js">​</script>​]
$.parseHTML('<script src="xss-attach.js"></script>')
// jQuery returns []

Namun, harap perhatikan bahwa a adalah objek jQuery sementara b adalah elemen html:

a.html('123')
// [<div>​123​</div>​]
b.html('123')
// TypeError: Object [object HTMLDivElement] has no method 'html'
$(b).html('123')
// [<div>​123​</div>​]

PERBARUI

Pada versi terbaru jQuery, metode berikut ini tidak menetapkan properti yang diteruskan di Objek kedua

Jawaban sebelumnya

Saya merasa menggunakan document.createElement('div') bersama dengan jQuery lebih cepat:

$(document.createElement('div'), {
    text: 'Div text',
    'class': 'className'
}).appendTo('#parentDiv');

Meskipun ini adalah pertanyaan yang sangat lama, saya pikir akan lebih baik untuk memperbaruinya dengan informasi terbaru;

Sejak jQuery 1.8 ada fungsi jQuery.parseHTML () yang sekarang merupakan cara yang lebih disukai untuk membuat elemen. Juga, ada beberapa masalah dengan parsing HTML via $('(html code goes here)'), misalnya situs web jQuery resmi menyebutkan hal berikut di salah satu dari catatan rilisnya :

Penguraian HTML yang rileks: Anda dapat sekali lagi memiliki spasi atau baris baru sebelum tag dalam $ (htmlString). Kami masih sangat menyarankan agar Anda menggunakan $ .parseHTML () saat mem-parsing HTML yang diperoleh dari sumber eksternal, dan mungkin membuat perubahan lebih lanjut ke penguraian HTML di masa mendatang.

Untuk menghubungkannya dengan pertanyaan aktual, contoh yang diberikan dapat diterjemahkan ke:

this.$OuterDiv = $($.parseHTML('<div></div>'))
    .hide()
    .append($($.parseHTML('<table></table>'))
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

yang sayangnya kurang nyaman daripada hanya menggunakan $(), tetapi itu memberi Anda lebih banyak kontrol, misalnya Anda dapat memilih untuk mengecualikan tag skrip (itu akan meninggalkan skrip inline seperti onclick meskipun):

> $.parseHTML('<div onclick="a"></div><script></script>')
[<div onclick=​"a">​</div>​]

> $.parseHTML('<div onclick="a"></div><script></script>', document, true)
[<div onclick=​"a">​</div>​, <script>​</script>​]

Juga, inilah tolok ukur dari jawaban teratas yang disesuaikan dengan kenyataan baru:

Tautan JSbin

jQuery 1.9.1

 $ .parseHTML: 88ms 
 $ ($. parseHTML): 240ms 
 <div> </div>: 138ms 
 <div>: 143ms 
 createElement: 64ms 

Sepertinya parseHTML jauh lebih dekat dengan createElement daripada $(), tetapi semua dorongan hilang setelah membungkus hasilnya dalam objek jQuery baru

var mydiv = $('<div />') // also works

var div = $('<div/>');
div.append('Hello World!');

Merupakan cara terpendek/termudah untuk membuat elemen DIV di jQuery.

Saya baru saja membuat plugin jQuery kecil untuk itu: https://github.com/ern0/jquery.create

Ini mengikuti sintaks Anda:

var myDiv = $.create("div");

ID simpul DOM dapat ditentukan sebagai parameter kedua:

var secondItem = $.create("div","item2");

Apakah ini serius? Tidak. Tapi sintaks ini lebih baik dari $ ("<div> </div>") , dan itu adalah nilai yang sangat baik untuk uang itu.

Saya pengguna jQuery baru, beralih dari DOMAssistant, yang memiliki fungsi serupa: http://www.domassistant.com/documentation/DOMAssistantContent-module.php

Plugin saya lebih sederhana, saya pikir attrs dan konten lebih baik untuk ditambahkan dengan metode chaining:

$("#container").append( $.create("div").addClass("box").html("Hello, world!") );

Juga, ini adalah contoh yang bagus untuk jQuery-plugin sederhana (yang ke-100).

Semuanya lurus ke depan! Berikut beberapa contoh cepat ...

var $example = $( XMLDocRoot );

var $element = $( $example[0].createElement('tag') );
// Note the [0], which is the root

$element.attr({
id: '1',
hello: 'world'
});

var $example.find('parent > child').append( $element );

Tidak disebutkan dalam jawaban sebelumnya, jadi saya menambahkan contoh kerja cara membuat elemen elemen dengan jQuery terbaru, juga dengan atribut tambahan seperti konten, kelas, atau panggilan balik klik:

const mountpoint = 'https://jsonplaceholder.typicode.com/users'

const $button = $('button')
const $tbody = $('tbody')

const loadAndRender = () => {
  $.getJSON(mountpoint).then(data => {

    $.each(data, (index, { id, username, name, email }) => {
      let row = $('<tr>')
        .append($('<td>', { text: id }))
        .append($('<td>', {
          text: username,
          class: 'click-me',
          on: {
            click: _ => {
              console.log(name)
            }
          }
        }))
        .append($('<td>', { text: email }))

      $tbody.append(row)
    })

  })
}

$button.on('click', loadAndRender)

.click-me {
  background-color: lightgrey
}

<table style="width: 100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Username</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

<button>Load and render</button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Apa itu class di PHP?

Apa perbedaan ID dan class?

Apa itu tag class?

Apa fungsi class pada css?