1017

¿Cómo podría lograr lo siguiente?

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

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

javascript jquery html innerhtml tonyf
fuente

1531

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

Zed
fuente

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

zombat
fuente

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

1

@AnoopJoshi stackoverflow.com/questions/1910794/…

Machavity

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

Cine
fuente

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

danés
fuente

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'.

Webeng
fuente

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

Somnath Muluk
fuente

11

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

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

O

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

jitendra varshney
fuente

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

Pratik
fuente

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>

Expandir fragmento

Nikit Barochiya
fuente

7

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

Al.UrBasebelon Tomeh
fuente

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>

Expandir fragmento

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.

Pavel Donchev
fuente

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

Alireza
fuente

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

Respuestas:

Usar animación para cambiar HTML interno