Use jquery para establecer el valor de la etiqueta div

80

Tengo esta etiqueta div html definida:

<div style="height:100px; width:100px" class="total-title">
    first text
</div>

Tengo el código jquery para cambiar su valor:

 $('div.total-title').html('test');

Pero esto no cambia el contenido del div.

jquery html aire
fuente
2
Dónde exactamente ejecuta la instrucción: $ ('div.total-title'). Html ('test'); ??
Niek H.
1
No hay absolutamente nada de malo con el código, si llama al código js después de que el DOM esté listo. Farzad, lo respondió correctamente.
Simplyharsh

Respuestas:

155

si su valor es un texto puro (como 'prueba'), también puede usar el método text (). Me gusta esto:

$('div.total-title').text('test');

de todos modos, sobre el problema que está compartiendo, creo que podría estar llamando al código JavaScript antes de que el código HTML para el DIV se envíe al navegador. asegúrese de llamar a la línea jQuery en una etiqueta <script> después de <div>, o en una declaración como esta:

$(document).ready(
    function() {
        $('div.total-title').text('test');
    }
);

de esta manera, el script se ejecuta después de que el navegador analiza el HTML del div.

farzad
fuente
3
Cuando lo puse como div.total-value no estaba funcionando. Pero después de hacerlo como # valor total, funciona
Nipuna
¿Por qué necesitas rapear una función anónima? ¿Funcionará sin él?
Nahser Bakht
Debido a que la página aún no se ha configurado si no ha terminado de cargarse, es posible que el div ni siquiera exista todavía si simplemente coloca el código sin procesar en el nivel superior de, digamos, <head>.
DragonLord
se requiere la función lista o anónima para retrasar la evaluación. En este caso redundante, creo que el código es excesivo, pero anima a los encargados del mantenimiento del software de cortar y pegar para evitar errores más adelante.
DragonLord
sí, creo que debería ser$('#div.total-title').text('test');
hynsey
9

Para poner texto, use .text('text')

Si desea usar .html(SomeValue), SomeValue debe tener etiquetas html que pueden estar dentro de un div, también debe funcionar.

Simplemente verifique la ubicación de su script, como dijo Farzad.

Referencia: .html y texto

MaLKaV_eS
fuente
5

prueba esta función $('div.total-title').text('test');

Alex H
fuente
el texto está obsoleto ahora, para la versión 1.4 o anterior.
Rishabh
4

Ha hecho referencia al archivo jQuery JS, ¿no es así? No hay ninguna razón por la que la respuesta de farzad no funcione.

djdd87
fuente
0

Al usar el .html()método, htmlStringdebe ser el parámetro. ( fuente ) Coloque su cadena dentro de una etiqueta HTML y debería funcionar o usarse .text()como lo sugiere farzad.

Ejemplo:

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
</div>

<script type="text/javascript">
$("div.demo-container").html( "<p>All new content. <em>You bet!</em></p>" );
</script>
Jo Smo
fuente
0

utilizar de la siguiente manera:

<div id="getSessionStorage"></div>

Para que esto agregue algo, use el siguiente código como referencia:

$(document).ready(function () {
        var storageVal = sessionStorage.getItem("UserName");
        alert(storageVal);
        $("#getSessionStorage").append(storageVal);
     });

Esto aparecerá como se muestra a continuación en html (asumiendo storageVal = "Rishabh")

<div id="getSessionStorage">Rishabh</div>
Rishabh
fuente