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?

javascript jquery html innerhtml tonyf
la source

Réponses:

1531 
$("#regTitle").html("Hello World");
Zed
la source
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');
zombat
la source
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
1
@AnoopJoshi stackoverflow.com/questions/1910794/…
Machavity
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);
Ciné
la source
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();
Danois
la source
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'.

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

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

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

OU

$("#regTitle").text("hello world");
jitendra varshney
la source
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");
Pratik
la source
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>
Développer l'extrait

Nikit Barochiya
la source
7 
$("#regTitle")[0].innerHTML = 'Hello World';
Al.UrBasebelon Tomeh
la source
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>
Développer l'extrait

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.

Pavel Donchev
la source
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 ...

Alireza
la source