1017

Як я міг досягти наступного:

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

Використовуючи jQuery, де regTitleмій ідентифікатор div?

— tonyf
джерело

1530

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

— Зед
джерело

320

Функція html () може приймати рядки HTML і ефективно модифікувати .innerHTMLвластивість.

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

Однак функція text () змінить (text) значення вказаного елемента, але збереже htmlструктуру.

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

— зомбат
джерело

12

"але зберігайте структуру html". ви можете пояснити?

— Anoop Joshi

10

З документації JQuery API ( api.jquery.com/text ), text()відрізняється , як: Unlike the .html() method, .text() can be used in both XML and HTML documents.. Крім того, згідно з 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

Якщо натомість у вас є об’єкт jquery, який ви хочете візуалізувати замість наявного вмісту: Потім просто скиньте вміст і додайте новий.

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

Або:

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

— Кінь
джерело

17

Хороше місце для використанняitemtoReplaceContentOf.empty();

— Кевін Панько

Це newcontentоб’єкт jQuery? Це не ясно.

— kmoser

@kmoser У першому прикладі newcontent справді є об'єктом jquery. У другому прикладі це може бути тип htmlStringабо Elementабо Textабо Arrayабо jQueryвідповідно до api.jquery.com/append

— Cine

27

Ось ваша відповідь:

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

— датчанин
джерело

11

Відповідь:

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

Пояснення:

$еквівалентно jQuery. Обидва представляють один і той же об'єкт у бібліотеці jQuery. "#regTitle"Усередині круглих дужок називається селектор , який використовується бібліотекою JQuery , щоб визначити , який елемент (и) в HTML DOM (Document Object Model) , який потрібно застосувати код. #Перш , ніж regTitleговорить JQuery , що regTitleце ідентифікатор елемента всередині DOM.

Звідси позначення крапок використовується для виклику функції html, яка замінює внутрішній html будь-яким параметром, який ви розміщуєте між дужками, що в цьому випадку є 'Hello World'.

— Вебенг
джерело

11

Вже є відповіді, які пояснюють, як змінити Внутрішній HTML елемент.

Але я б запропонував, вам слід використовувати деяку анімацію, як Fade Out / Fade In, щоб змінити HTML, який дає хороший ефект від зміненого HTML, а не миттєвого зміни внутрішнього HTML.

Використовуйте анімацію, щоб змінити Внутрішній HTML

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

Якщо у вас є багато функцій, які потребують цього, ви можете викликати загальну функцію, яка змінює внутрішній Html.

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

— Сомнат Мулук
джерело

11

ви можете використовувати або html, або текстову функцію в jquery, щоб досягти цього

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

АБО

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

— житендра варшней
джерело

9

jQuery .html()можна використовувати для встановлення та отримання вмісту відповідних непорожніх елементів ( innerHTML).

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

— Пратік
джерело

Відкриті та закриті дужки після html врятували мене. Тож пам’ятайте, що ці два люди важливі.

— Геллі Енн

9

Приклад

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

Розгорніть фрагмент

— Микит Барохія
джерело

7

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

— Al.UrBasebelon Tomeh
джерело

3

Просто додати інформацію про ефективність.

Кілька років тому у мене був проект, де у нас виникли проблеми, що намагалися встановити великий HTML / текст на різні елементи HTML.

Виявилося, що "відтворити" елемент і ввести його в DOM було набагато швидшим, ніж будь-який із запропонованих методів оновлення вмісту DOM.

Тож щось на кшталт:

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>

Розгорніть фрагмент

Слід отримати кращі показники. Я нещодавно не намагався оцінити це (браузери повинні бути розумними в наші дні), але якщо ви шукаєте ефективність, це може допомогти.

Мінус полягає в тому, що у вас буде більше роботи над тим, щоб DOM та посилання у ваших сценаріях вказували на потрібний об’єкт.

— Павло Дончев
джерело

3

jQuery має кілька функцій, які працюють з текстом, якщо ви використовуєте text()його, він зробить роботу за вас:

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

Також можна використовувати html() натомість, якщо у вас є тег HTML ...

— Аліреза
джерело

Як замінити innerHTML діла за допомогою jQuery?

Використовуйте анімацію, щоб змінити Внутрішній HTML