web-dev-qa-db-fra.com

Comment remplacer innerHTML d'une div en utilisant jQuery?

Comment pourrais-je atteindre les objectifs suivants:

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

Utilisation de jQuery où regTitle est mon ID div?

javascriptjqueryhtmlinnerhtml
923
tonyf
$("#regTitle").html("Hello World");
1381
Zed

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

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

Cependant, la fonction text () changera la valeur (text) de l'élément spécifié, mais conservera la structure html.

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

Si vous avez plutôt un objet jQuery que vous souhaitez rendre au lieu du contenu existant. Ensuite, réinitialisez simplement le contenu et ajoutez le nouveau.

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

Ou:

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

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();
24
dane

Il existe déjà des réponses indiquant comment modifier Inner HTML d'un élément.

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

Utiliser l'animation pour changer le code HTML interne

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

Si vous avez plusieurs fonctions qui en ont besoin, vous pouvez appeler une fonction commune qui change le code HTML interne.

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

Réponse:

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

Explication:

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

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

10
Webeng

vous pouvez utiliser la fonction HTML ou texte dans jQuery pour y parvenir

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

OR

$("#regTitle").text("hello world");
9
jitendra varshney

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

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

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>

7
Nikit Barochiya
$("#regTitle")[0].innerHTML = 'Hello World';
5
Al.UrBasebelon Tomeh

Juste pour ajouter des informations sur les performances. 

Il y a quelques années, j'avais un projet dans lequel nous avions des difficultés à 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 toutes les 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 ces temps-ci), 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.

4
Pavel Donchev

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

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

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

1
Alireza