Comment remplacer innerHTML d'un div en utilisant jQuery?


1017

Comment pourrais-je atteindre les objectifs suivants:

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

Utilisation de jQuery où regTitleest mon ID div?

Réponses:


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

320

La fonction html () peut prendre des chaînes de code HTML et modifiera efficacement la .innerHTMLpropriété.

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

Cependant, la fonction text () changera la valeur (text) de l'élément spécifié, mais gardera la htmlstructure.

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

12
msgstr "mais gardez la structure html". peux-tu expliquer?
Anoop Joshi

10
A partir de la documentation de l' API jQuery ( de api.jquery.com/text ), text()est différent comme: Unlike the .html() method, .text() can be used in both XML and HTML documents.. En outre, selon stackoverflow.com/questions/1910794/... , jQuery.html() treats the string as HTML, jQuery.text() treats the content as text.
Gorgsenegger


69

Si vous avez plutôt un objet jquery que vous souhaitez rendre à la place du contenu existant: Réinitialisez simplement le contenu et ajoutez le nouveau.

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

Ou:

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

17
Bon endroit pour utiliseritemtoReplaceContentOf.empty();
Kevin Panko

Est newcontent-ce un objet jQuery? Ce n'est pas clair.
kmoser

@kmoser Dans le premier exemple, newcontent est en effet un objet jquery. Dans le deuxième exemple, il peut être de type htmlStringou Elementou Textou Arrayou jQueryselon api.jquery.com/append
Cine

27

Voici votre réponse:

//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

Réponse:

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

Explication:

$est équivalent à jQuery. Les deux représentent le même objet dans la bibliothèque jQuery. L' "#regTitle"intérieur de la parenthèse est appelé le sélecteur utilisé par la bibliothèque jQuery pour identifier le ou les éléments du DOM html (modèle d'objet de document) auxquels vous souhaitez appliquer du code. L' #avant regTitleindique à jQuery qui regTitleest l'id d'un élément à l'intérieur du DOM.

De là, la notation par points est utilisée pour appeler la fonction html qui remplace le html interne par le paramètre que vous placez entre les parenthèses, ce qui est le cas dans ce cas 'Hello World'.


11

Il existe déjà des réponses qui indiquent comment modifier le code HTML interne de l'élément.

Mais je dirais que vous devriez utiliser une animation comme Fade Out / Fade In pour changer le HTML, ce qui donne un bon effet du HTML modifié plutôt que le HTML interne change instantanément.

Utiliser l'animation pour changer le HTML interne

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

Si vous avez de nombreuses fonctions qui en ont besoin, vous pouvez appeler une fonction commune qui change le Html interne.

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

11

vous pouvez utiliser la fonction html ou text en jquery pour y parvenir

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

OU

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

9

jQuery .html()peut être utilisé pour définir et obtenir le contenu des éléments non vides correspondants ( innerHTML).

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

La parenthèse d'ouverture et de fermeture après html m'a sauvé. N'oubliez donc pas que ces deux-là sont importants.
Gellie Ann

9

Exemple

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

Juste pour ajouter quelques informations sur les performances.

Il y a quelques années, j'avais un projet, où nous avions des problèmes pour essayer de définir un grand HTML / texte sur divers éléments HTML.

Il est apparu que "recréer" l'élément et l'injecter dans le DOM était bien plus rapide que n'importe laquelle des méthodes suggérées pour mettre à jour le contenu du DOM.

Donc quelque chose comme:

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>

Devrait vous obtenir une meilleure performance. Je n'ai pas récemment essayé de mesurer cela (les navigateurs devraient être intelligents de nos jours), mais si vous recherchez des performances, cela peut aider.

L'inconvénient est que vous aurez plus de travail pour garder le DOM et les références dans vos scripts pointant vers le bon objet.


3

jQuery a peu de fonctions qui fonctionnent avec du texte, si vous en utilisez text()une, elle fera le travail pour vous:

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

En outre, vous pouvez utiliser à la html()place, si vous avez une balise html ...

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.