Réponses:
La fonction html () peut prendre des chaînes de code HTML et modifiera efficacement la .innerHTML
propriété.
$('#regTitle').html('Hello World');
Cependant, la fonction text () changera la valeur (text) de l'élément spécifié, mais gardera la html
structure.
$('#regTitle').text('Hello world');
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
.
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);
itemtoReplaceContentOf.empty();
newcontent
-ce un objet jQuery? Ce n'est pas clair.
htmlString
ou Element
ou Text
ou Array
ou jQuery
selon api.jquery.com/append
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 regTitle
indique à jQuery qui regTitle
est 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'
.
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.
$('#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);
});
}
vous pouvez utiliser la fonction html ou text en jquery pour y parvenir
$("#regTitle").html("hello world");
OU
$("#regTitle").text("hello world");
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");
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>
$("#regTitle")[0].innerHTML = 'Hello World';
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.