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

¿Cómo podría lograr lo siguiente?

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

Usando jQuery donde regTitle es mi div Identificación?

preguntado el 20 de agosto de 09 a las 20:08

13 Respuestas

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

Respondido 21 ago 09, 00:08

El html () La función puede tomar cadenas de HTML y modificará eficazmente la .innerHTML propiedad.

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

Sin embargo, a pesar de la texto() La función cambiará el valor (texto) del elemento especificado, pero mantendrá el html estructura.

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

respondido 27 nov., 13:11

"pero mantén la estructura html". ¿puedes explicar? - anoop joshi

De la documentación de la API de jQuery (api.jquery.com/texto), 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

Si, en cambio, tiene un objeto jQuery que desea representar en lugar del contenido existente: luego simplemente restablezca el contenido y agregue el nuevo.

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

o:

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

Respondido 20 Jul 20, 19:07

Buen lugar para usar itemtoReplaceContentOf.empty(); - kevin panko

Is newcontent Qué es 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 htmlString or Element or Text or Array or jQuery según api.jquery.com/append - Cine

Esta es 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();

respondido 27 nov., 13:08

Respuesta

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

Explicación:

$ es equivalente a jQuery. Ambos representan el mismo objeto en la biblioteca jQuery. La "#regTitle" dentro del paréntesis se llama selector que es utilizado por la biblioteca jQuery para identificar a qué elemento (s) del DOM html (Modelo de objeto de documento) desea aplicar el código. La # antes regTitle le está diciendo 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 al html función que reemplaza el html interno con cualquier parámetro que coloque entre paréntesis, que en este caso es 'Hello World'.

Respondido el 22 de junio de 16 a las 03:06

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 cambiado en lugar de cambiar instantáneamente el HTML interno.

Utilice la animación para cambiar el HTML interno

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

Si tiene muchas funciones que necesitan esto, entonces 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);
    });
}

Respondido el 20 de junio de 20 a las 10:06

puede usar la función html o text en jquery para lograrlo

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

OR

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

Respondido 03 Feb 17, 06:02

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>

Respondido 27 Feb 19, 07:02

jQuery's .html() se puede utilizar para configurar y obtener el contenido de elementos coincidentes no vacíos (innerHTML).

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

Respondido 28 Oct 15, 19:10

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

$("#regTitle")[0].innerHTML = 'Hello World';

Respondido el 21 de Septiembre de 17 a las 13:09

Solo para agregar algunas ideas sobre el rendimiento.

Hace unos años tuve un proyecto, en el que tuvimos problemas al intentar configurar un HTML / Texto grande en varios elementos HTML.

Al parecer, "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 conseguirle un mejor rendimiento. No he intentado medir eso recientemente (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.

Respondido el 21 de enero de 18 a las 15:01

jQuery tiene pocas funciones que funcionen con texto, si usa text() uno, hará el trabajo por ti:

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

Además, puedes usar html() en cambio, si tienes alguna etiqueta html...

Respondido el 31 de enero de 19 a las 11:01

JS puro y el más corto

JS puro

regTitle.innerHTML = 'Hello World'

regTitle.innerHTML = 'Hello World';
<div id="regTitle"></div>

El mas corto

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

// note: no quotes around regTitle
$(regTitle).html('Hello World'); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="regTitle"></div>

Respondido el 12 de junio de 20 a las 10:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.