1017

Como eu consegui o seguinte:

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

Usando jQuery, onde regTitleestá o meu ID div?

javascript jquery html innerhtml tonyf
fonte

1530

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

Zed
fonte

320

A função html () pode receber cadeias de caracteres de HTML e modificará efetivamente a .innerHTMLpropriedade.

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

No entanto, a função text () alterará o valor (texto) do elemento especificado, mas manterá a htmlestrutura.

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

zombat
fonte

12

"mas mantenha a estrutura html". você pode explicar?

Ano Joshi

10

A partir da documentação jQuery API ( api.jquery.com/text ), text()é diferente como: Unlike the .html() method, .text() can be used in both XML and HTML documents.. Além disso, de acordo com 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 31/03

69

Se você possui um objeto jquery que deseja renderizar em vez do conteúdo existente: basta redefinir o conteúdo e anexar o novo.

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

Ou:

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

Cine
fonte

17

Bom lugar para usaritemtoReplaceContentOf.empty();

Kevin Panko

É newcontentum objeto jQuery? Isto não está claro.

precisa saber é o seguinte

@kmoser No primeiro exemplo, newcontent é realmente um objeto jquery. No segundo exemplo, pode ser do tipo htmlStringou Elementou Textou Arrayou jQueryconforme api.jquery.com/append

Cine

27

Aqui está a sua resposta:

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

dinamarquês
fonte

11

Responda:

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

Explicação:

$é equivalente a jQuery. Ambos representam o mesmo objeto na biblioteca jQuery. O "#regTitle"interior dos parênteses é chamado seletor usado pela biblioteca jQuery para identificar a quais elementos do DOM html (Document Object Model) html você deseja aplicar o código. O #anterior regTitleestá dizendo ao jQuery que regTitleé o ID de um elemento dentro do DOM.

A partir daí, a notação de ponto é usada para chamar a função html , que substitui o html interno por qualquer parâmetro que você colocar entre os parênteses, o que nesse caso é 'Hello World'.

Webeng
fonte

11

Já existem respostas que mostram como alterar o HTML interno do elemento.

Mas eu sugiro que você deva usar algumas animações como Fade Out / Fade In para alterar o HTML, o que dá um bom efeito à mudança de HTML, em vez de mudar instantaneamente o HTML interno.

Use animação para alterar o HTML interno

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

Se você tiver muitas funções que precisam disso, poderá chamar a função comum que altera o Html interno.

function changeInnerHtml(elementPath, newText){
    $(elementPath).fadeOut(500, function() {
        $(this).html(newText).fadeIn(500);
    });
}

Somnath Muluk
fonte

11

você pode usar a função html ou text no jquery para alcançá-lo

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

OU

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

jitendra varshney
fonte

9

O jQuery .html()pode ser usado para definir e obter o conteúdo de elementos não vazios correspondentes ( innerHTML).

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

Pratik
fonte

O parêntese de abertura e fechamento após html me salvou. Então lembre-se de pessoas essas duas são importantes.

Gellie Ann

9

Exemplo

$( 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 snippet

Nikit Barochiya
fonte

7

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

Al.UrBasebelon Tomeh
fonte

3

Apenas para adicionar algumas idéias de desempenho.

Alguns anos atrás, eu tinha um projeto, no qual tínhamos problemas ao tentar definir um HTML / Texto grande para vários elementos HTML.

Parecia que "recriar" o elemento e injetá-lo no DOM era muito mais rápido que qualquer um dos métodos sugeridos para atualizar o conteúdo do DOM.

Então, 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 snippet

Você deve obter um melhor desempenho. Recentemente, não tentei medir isso (os navegadores devem ser inteligentes hoje em dia), mas se você estiver procurando por desempenho, pode ajudar.

A desvantagem é que você terá mais trabalho para manter o DOM e as referências em seus scripts apontando para o objeto certo.

Pavel Donchev
fonte

3

O jQuery possui poucas funções que funcionam com texto; se você usar text()uma, ele fará o trabalho para você:

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

Além disso, você pode usar html(), se tiver alguma tag html ...

Alireza
fonte

Como substituir innerHTML de uma div usando jQuery?

Respostas:

Use animação para alterar o HTML interno