1017

Bagaimana saya bisa mencapai hal berikut:

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

Menggunakan jQuery di mana regTitleID div saya?

— tonyf
sumber

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

Bagaimana cara mengganti innerHTML dari div menggunakan jQuery?

Gunakan animasi untuk mengubah HTML Dalam