Bagaimana cara mengganti innerHTML dari div menggunakan jQuery?


1017

Bagaimana saya bisa mencapai hal berikut:

document.all.regTitle.innerHTML = 'Hello World';

Menggunakan jQuery di mana regTitleID div saya?

Jawaban:


1530
$("#regTitle").html("Hello World");

320

Fungsi html () dapat mengambil string HTML, dan secara efektif akan memodifikasi .innerHTMLproperti.

$('#regTitle').html('Hello World');

Namun, fungsi text () akan mengubah nilai (text) dari elemen yang ditentukan, tetapi tetap mempertahankan htmlstrukturnya.

$('#regTitle').text('Hello world'); 

12
"tapi pertahankan struktur html". dapatkah kamu menjelaskan
Anoop Joshi

10
Dari dokumentasi jQuery API ( api.jquery.com/text ), text()berbeda sebagai: Unlike the .html() method, .text() can be used in both XML and HTML documents.. Selanjutnya, menurut stackoverflow.com/questions/1910794/... , jQuery.html() treats the string as HTML, jQuery.text() treats the content as text.
Gorgsenegger


69

Jika Anda memiliki objek jquery yang ingin Anda render alih-alih konten yang ada: Kemudian atur ulang konten dan tambahkan yang baru.

var itemtoReplaceContentOf = $('#regTitle');
itemtoReplaceContentOf.html('');
newcontent.appendTo(itemtoReplaceContentOf);

Atau:

$('#regTitle').empty().append(newcontent);

17
Tempat yang baik untuk digunakanitemtoReplaceContentOf.empty();
Kevin Panko

Apakah newcontentobjek jQuery? Ini tidak jelas.
kmoser

@kmoser Dalam contoh pertama, konten baru memang objek jquery. Dalam contoh kedua dapat dari jenis htmlStringatau Elementatau Textatau Arrayatau jQueryper api.jquery.com/append
Cine

27

Inilah jawaban Anda:

//This is the setter of the innerHTML property in jQuery
$('#regTitle').html('Hello World');

//This is the getter of the innerHTML property in jQuery
var helloWorld = $('#regTitle').html();

11

Menjawab:

$("#regTitle").html('Hello World');

Penjelasan:

$setara dengan jQuery. Keduanya mewakili objek yang sama di perpustakaan jQuery. Bagian "#regTitle"dalam tanda kurung disebut pemilih yang digunakan oleh perpustakaan jQuery untuk mengidentifikasi elemen (s) mana dari html DOM (Model Objek Dokumen) yang ingin Anda terapkan kode. The #sebelum regTitlememberitahu jQuery yang regTitlemerupakan id dari elemen dalam DOM.

Dari sana, notasi titik digunakan untuk memanggil fungsi html yang menggantikan html dalam dengan parameter apa pun yang Anda tempatkan di antara tanda kurung, yang dalam hal ini adalah 'Hello World'.


11

Sudah ada jawaban yang memberikan cara mengubah elemen HTML Dalam.

Tapi saya sarankan, Anda harus menggunakan beberapa animasi seperti Fade Out / Fade In untuk mengubah HTML yang memberikan efek yang baik dari perubahan HTML, bukan langsung mengubah HTML batin.

Gunakan animasi untuk mengubah HTML Dalam

$('#regTitle').fadeOut(500, function() {
    $(this).html('Hello World!').fadeIn(500);
});

Jika Anda memiliki banyak fungsi yang memerlukan ini, maka Anda dapat memanggil fungsi umum yang mengubah Html dalam.

function changeInnerHtml(elementPath, newText){
    $(elementPath).fadeOut(500, function() {
        $(this).html(newText).fadeIn(500);
    });
}

11

Anda dapat menggunakan fungsi html atau teks di jquery untuk mencapainya

$("#regTitle").html("hello world");

ATAU

$("#regTitle").text("hello world");

9

jQuery's .html()dapat digunakan untuk mengatur dan mendapatkan konten dari elemen yang tidak kosong yang cocok ( innerHTML).

var contents = $(element).html();
$(element).html("insert content into element");

Tanda kurung buka dan tutup setelah html menyelamatkan saya. Jadi ingat kedua orang itu penting.
Gellie Ann

9

Contoh

$( document ).ready(function() {
  $('.msg').html('hello world');
});
    <!DOCTYPE html>
    <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    
      </head>
      <body>
        <div class="msg"></div>
      </body>
    </html>



3

Hanya untuk menambah wawasan kinerja.

Beberapa tahun yang lalu saya punya proyek, di mana kami memiliki masalah mencoba mengatur HTML / Teks besar ke berbagai elemen HTML.

Tampaknya, "menciptakan kembali" elemen dan menyuntikkannya ke DOM jauh lebih cepat daripada metode yang disarankan untuk memperbarui konten DOM.

Jadi sesuatu seperti:

var text = "very big content";
$("#regTitle").remove();
$("<div id='regTitle'>" + text + "</div>").appendTo("body");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Seharusnya membuat Anda mendapatkan kinerja yang lebih baik. Baru-baru ini saya belum mencoba mengukurnya (peramban seharusnya pintar hari ini), tetapi jika Anda mencari kinerja mungkin membantu.

Kelemahannya adalah Anda akan memiliki lebih banyak pekerjaan untuk menjaga DOM dan referensi dalam skrip Anda menunjuk ke objek yang tepat.


3

jQuery memiliki beberapa fungsi yang bekerja dengan teks, jika Anda menggunakannya text(), ia akan melakukan pekerjaan untuk Anda:

$("#regTitle").text("Hello World");

Selain itu, Anda dapat menggunakan html()sebagai gantinya, jika Anda memiliki tag html ...

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.