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?

javascript jquery html innerhtml tonyf
sumber

Jawaban:

1530 
$("#regTitle").html("Hello World");
Zed
sumber
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');
zombat
sumber
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
1
@AnoopJoshi stackoverflow.com/questions/1910794/…
Machavity
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);
Cine
sumber
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();
dane
sumber
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'.

Webeng
sumber
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);
    });
}
Somnath Muluk
sumber
11

Anda dapat menggunakan fungsi html atau teks di jquery untuk mencapainya

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

ATAU

$("#regTitle").text("hello world");
jitendra varshney
sumber
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");
Pratik
sumber
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>
Luaskan cuplikan

Nikit Barochiya
sumber
7 
$("#regTitle")[0].innerHTML = 'Hello World';
Al.UrBasebelon Tomeh
sumber
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>
Luaskan cuplikan

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.

Pavel Donchev
sumber
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 ...

Alireza
sumber