¿Cómo reemplazar innerHTML de un div usando jQuery?


1017

¿Cómo podría lograr lo siguiente?

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

Usando jQuery, ¿dónde regTitleestá mi ID div?

Respuestas:


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

320

La función html () puede tomar cadenas de HTML y modificará efectivamente la .innerHTMLpropiedad.

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

Sin embargo, la función text () cambiará el valor (text) del elemento especificado, pero mantendrá la htmlestructura.

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

12
"pero mantén la estructura html". ¿puedes explicar?
Anoop Joshi

10
A partir de la documentación de la API jQuery ( api.jquery.com/text ), 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.
Gorgsenegger


69

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);

17
Buen lugar para usaritemtoReplaceContentOf.empty();
Kevin Panko

¿ newcontentEs un objeto jQuery? Esto no está claro.
kmoser

@kmoser En el primer ejemplo, newcontent es de hecho un objeto jquery. En el segundo ejemplo, puede ser de tipo htmlStringo Elemento Texto Arrayo jQuerysegún api.jquery.com/append
Cine

27

Aquí está tu respuesta:

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

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 regTitlele dice a jQuery que regTitlees 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'.


11

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.

Usar animación para cambiar HTML interno

$('#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);
    });
}

11

puedes usar html o función de texto en jquery para lograrlo

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

O

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

9

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");

El paréntesis de apertura y cierre después de html me salvó. Así que recuerden amigos, esos dos son importantes.
Gellie Ann

9

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>



3

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.


3

jQuery tiene pocas funciones que funcionan con texto, si usa text()una, hará el trabajo por usted:

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

Además, puede usar html()en su lugar, si tiene alguna etiqueta html ...

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.