Respuestas:
La función html () puede tomar cadenas de HTML y modificará efectivamente la .innerHTML
propiedad.
$('#regTitle').html('Hello World');
Sin embargo, la función text () cambiará el valor (text) del elemento especificado, pero mantendrá la html
estructura.
$('#regTitle').text('Hello world');
text()
es diferente como: Unlike the .html() method, .text() can be used in both XML and HTML documents.
. Además, según stackoverflow.com/questions/1910794/... , jQuery.html() treats the string as HTML, jQuery.text() treats the content as text
.
Si, en cambio, tiene un objeto jquery que desea representar en lugar del contenido existente: entonces simplemente restablezca el contenido y agregue el nuevo.
var itemtoReplaceContentOf = $('#regTitle');
itemtoReplaceContentOf.html('');
newcontent.appendTo(itemtoReplaceContentOf);
O:
$('#regTitle').empty().append(newcontent);
itemtoReplaceContentOf.empty();
newcontent
Es un objeto jQuery? Esto no está claro.
htmlString
o Element
o Text
o Array
o jQuery
según api.jquery.com/append
Responder:
$("#regTitle").html('Hello World');
Explicación:
$
es equivalente a jQuery
. Ambos representan el mismo objeto en la biblioteca jQuery. El "#regTitle"
interior del paréntesis se llama el selector que utiliza la biblioteca jQuery para identificar a qué elemento (s) del html DOM (Modelo de objeto de documento) al que desea aplicar el código. Lo #
anterior regTitle
le dice a jQuery que regTitle
es la identificación de un elemento dentro del DOM.
A partir de ahí, la notación de puntos se usa para llamar a la función html que reemplaza el html interno con cualquier parámetro que coloque entre paréntesis, que en este caso es 'Hello World'
.
Ya hay respuestas que dan cómo cambiar el HTML interno del elemento.
Pero sugeriría que debería usar alguna animación como Fade Out / Fade In para cambiar HTML, lo que da un buen efecto de HTML modificado en lugar de cambiar HTML interno al instante.
$('#regTitle').fadeOut(500, function() {
$(this).html('Hello World!').fadeIn(500);
});
Si tiene muchas funciones que lo necesitan, puede llamar a la función común que cambia el HTML interno.
function changeInnerHtml(elementPath, newText){
$(elementPath).fadeOut(500, function() {
$(this).html(newText).fadeIn(500);
});
}
puedes usar html o función de texto en jquery para lograrlo
$("#regTitle").html("hello world");
O
$("#regTitle").text("hello world");
jQuery's .html()
se puede usar para establecer y obtener el contenido de elementos no vacíos coincidentes ( innerHTML
).
var contents = $(element).html();
$(element).html("insert content into element");
Ejemplo
$( 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';
Solo para agregar algunas ideas de rendimiento.
Hace unos años tuve un proyecto, donde tuvimos problemas para intentar configurar un HTML / Texto grande para varios elementos HTML.
Parecía que "recrear" el elemento e inyectarlo en el DOM fue mucho más rápido que cualquiera de los métodos sugeridos para actualizar el contenido del DOM.
Entonces algo como:
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>
Debería conseguirte un mejor rendimiento. Recientemente no he intentado medir eso (los navegadores deberían ser inteligentes en estos días), pero si está buscando rendimiento, puede ayudar.
La desventaja es que tendrá más trabajo para mantener el DOM y las referencias en sus scripts apuntando al objeto correcto.