1017

Jak mogę osiągnąć następujące cele:

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

Używając jQuery, gdzie regTitlejest mój identyfikator div?

javascript jquery html innerhtml tonyf
źródło

1529

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

Zed
źródło

320

Funkcja html () może pobierać ciągi HTML i skutecznie modyfikuje .innerHTMLwłaściwość.

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

Jednak funkcja text () zmieni wartość (text) określonego elementu, ale zachowa htmlstrukturę.

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

zombat
źródło

12

„ale zachowaj strukturę HTML”. możesz wytłumaczyć?

Anoop Joshi

10

Z dokumentacji jQuery API ( api.jquery.com/text ), text()różni się: Unlike the .html() method, .text() can be used in both XML and HTML documents.. Ponadto, zgodnie z 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

Jeśli zamiast tego masz istniejący obiekt jquery, który chcesz wyrenderować: Po prostu zresetuj zawartość i dodaj nową.

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

Lub:

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

Cine
źródło

17

Dobre miejsce do użyciaitemtoReplaceContentOf.empty();

Kevin Panko,

Czy newcontentjest obiektem jQuery? To nie jest jasne.

kmoser

@kmoser W pierwszym przykładzie newcontent jest rzeczywiście obiektem jquery. W drugim przykładzie może być typu htmlStringlub Elementlub Textlub Arraylub jQueryzgodnie api.jquery.com/append

Cine

27

Oto twoja odpowiedź:

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

Duńczyk
źródło

11

Odpowiedź:

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

Wyjaśnienie:

$jest równoważne z jQuery. Oba reprezentują ten sam obiekt w bibliotece jQuery. "#regTitle"Wewnątrz nawiasu nazywany jest selektor , który jest wykorzystywany przez bibliotekę jQuery zidentyfikować, który element (y) HTML DOM (Document Object Model), który chcesz zastosować do kodu. #Przed regTitlemówi jQuery który regTitlejest identyfikatorem elementu wewnątrz DOM.

Stamtąd notacja kropkowa służy do wywołania funkcji html, która zastępuje wewnętrzny html dowolnym parametrem umieszczonym pomiędzy nawiasami, którym jest w tym przypadku 'Hello World'.

Webeng
źródło

11

Istnieją już odpowiedzi, które podają, jak zmienić wewnętrzny HTML elementu.

Proponuję jednak użyć animacji, takich jak Zanikanie / Zanikanie, aby zmienić HTML, co daje dobry efekt zmienionego HTML, a raczej natychmiastową zmianę wewnętrznego HTML.

Użyj animacji, aby zmienić wewnętrzny HTML

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

Jeśli masz wiele funkcji, które tego potrzebują, możesz wywołać funkcję wspólną, która zmienia wewnętrzny HTML.

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

Somnath Muluk
źródło

11

w tym celu możesz użyć funkcji HTML lub tekstu w jquery

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

LUB

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

jitendra varshney
źródło

9

jQuery .html()może być używany do ustawiania i pobierania zawartości dopasowanych niepustych elementów ( innerHTML).

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

Pratik
źródło

Nawias otwierający i zamykający po HTML uratował mnie. Więc pamiętajcie, ludzie ci dwaj są ważni.

Gellie Ann

9

Przykład

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

Rozwiń fragment kodu

Nikit Barochija
źródło

7

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

Al.UrBasebelon Tomeh
źródło

3

Aby dodać kilka informacji o wydajności.

Kilka lat temu miałem projekt, w którym mieliśmy problemy z ustawieniem dużego HTML / tekstu na różne elementy HTML.

Okazało się, że „odtworzenie” elementu i wstrzyknięcie go do DOM było znacznie szybsze niż którakolwiek z sugerowanych metod aktualizacji zawartości DOM.

Więc coś takiego:

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>

Rozwiń fragment kodu

Powinien zapewnić lepszą wydajność. Nie próbowałem tego ostatnio mierzyć (obecnie przeglądarki powinny być sprytne), ale jeśli szukasz wydajności, może to pomóc.

Minusem jest to, że będziesz mieć więcej pracy, aby utrzymać DOM i odwołania w skryptach wskazujące właściwy obiekt.

Pavel Donchev
źródło

3

jQuery ma kilka funkcji, które działają z tekstem, jeśli go użyjesz text(), zrobi to za Ciebie:

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

Możesz też użyć html()zamiast tego, jeśli masz tag HTML ...

Alireza
źródło

Jak zastąpić innerHTML div za pomocą jQuery?

Odpowiedzi:

Użyj animacji, aby zmienić wewnętrzny HTML