1017

Come potrei ottenere quanto segue:

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

Usando jQuery dov'è il regTitlemio ID div?

— tonyf
fonte

1530

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

— zeta
fonte

320

La funzione html () può accettare stringhe di HTML e modificherà efficacemente la .innerHTMLproprietà.

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

Tuttavia, la funzione text () cambierà il valore (text) dell'elemento specificato, ma manterrà la htmlstruttura.

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

— zombat
fonte

12

"ma mantieni la struttura html". Puoi spiegare?

— Anoop Joshi,

10

Dalla documentazione jQuery API ( api.jquery.com/text ), text()è diverso come: Unlike the .html() method, .text() can be used in both XML and HTML documents.. Inoltre, secondo 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

Se invece hai un oggetto jquery che vuoi rendere al posto del contenuto esistente: Quindi resetta il contenuto e aggiungi il nuovo.

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

O:

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

— Cine
fonte

17

Buon posto da usare itemtoReplaceContentOf.empty();

— Kevin Panko

È newcontentun oggetto jQuery? Questo non è chiaro

— kmoser

@kmoser Nel primo esempio, newcontent è davvero un oggetto jquery. Nel secondo esempio può essere di tipo htmlStringo Elementoppure Textoppure ArrayoppurejQuery secondo api.jquery.com/append

— Cine

27

Ecco la tua risposta:

//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();

— danese
fonte

11

Risposta:

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

Spiegazione:

$è equivalente a jQuery. Entrambi rappresentano lo stesso oggetto nella libreria jQuery. L' "#regTitle"interno della parentesi è chiamato il selettore che viene utilizzato dalla libreria jQuery per identificare gli elementi del DOM html (Document Object Model) a cui si desidera applicare il codice. Il# prima regTitledice a jQuery che regTitleè l'id di un elemento all'interno del DOM.

Da lì, la notazione punto viene utilizzata per chiamare la funzione html che sostituisce l'html interno con qualsiasi parametro inserito tra la parentesi, che in questo caso è 'Hello World'.

— Webeng
fonte

11

Ci sono già risposte che danno come cambiare HTML interno dell'elemento.

Ma suggerirei, dovresti usare alcune animazioni come Fade Out / Fade In per cambiare HTML che dà un buon effetto al cambio di HTML piuttosto che cambiare all'istante HTML interno.

Usa l'animazione per cambiare HTML interno

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

Se hai molte funzioni che ne hanno bisogno, puoi chiamare una funzione comune che cambia HTML interno.

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

— Somnath Muluk
fonte

11

puoi usare la funzione html o text in jquery per ottenerlo

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

O

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

— jitendra varshney
fonte

9

jQuery .html()può essere utilizzato per impostare e ottenere il contenuto di elementi non vuoti corrispondenti ( innerHTML).

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

— Pratik
fonte

La parentesi aperta e chiusa dopo html mi ha salvato. Quindi ricorda gente, quei due sono importanti.

— Gellie Ann,

9

Esempio

$( 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>

Espandi frammento

— Nikit Barochiya
fonte

7

$("#regTitle")[0].innerHTML = 'Hello World';

— Al.UrBasebelon Tomeh
fonte

3

Solo per aggiungere alcuni approfondimenti sulle prestazioni.

Alcuni anni fa ho avuto un progetto, in cui si sono verificati problemi nel tentativo di impostare un grande HTML / testo su vari elementi HTML.

Sembrava che "ricreare" l'elemento e iniettarlo nel DOM fosse molto più veloce di qualsiasi metodo suggerito per aggiornare il contenuto del DOM.

Quindi qualcosa del tipo:

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>

Espandi frammento

Dovresti ottenere prestazioni migliori. Di recente non ho provato a misurarlo (i browser dovrebbero essere intelligenti in questi giorni), ma se stai cercando prestazioni potrebbe essere d'aiuto.

Il rovescio della medaglia è che avrai più lavoro per mantenere il DOM e i riferimenti nei tuoi script che puntano all'oggetto giusto.

— Pavel Donchev
fonte

3

jQuery ha alcune funzioni che funzionano con il testo, se lo usi text() una, farà il lavoro per te:

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

Inoltre, puoi usare html() invece, se hai qualche tag html ...

— Alireza
fonte

Come sostituire innerHTML di un div usando jQuery?

Usa l'animazione per cambiare HTML interno