Как заменить innerHTML div, используя jQuery?

962

Как я могу достичь следующего:

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

Использование jQuery, где regTitle - мой идентификатор div?

Теги:
innerhtml

12 ответов

1359
Лучший ответ
$("#regTitle").html("Hello World");
Поделиться
273

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

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

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

$('#regTitle').text('Hello world');
Поделиться
  • 11
    msgstr "но держите структуру html". Вы можете объяснить?
  • 8
    В документации по API jQuery ( 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 .
Показать ещё 1 комментарий
60

Если вместо этого у вас есть объект jquery, который вы хотите отобразить вместо существующего. Затем просто reset содержимое и добавьте новое.

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

Или:

$('#regTitle').empty().append(newcontent);
Поделиться
  • 16
    Хорошее место для использования itemtoReplaceContentOf.empty();
  • 0
    Является ли newcontent объектом jQuery? Это не ясно.
Показать ещё 1 комментарий
23

Вот ваш ответ:

//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();
Поделиться
9

Уже есть ответы, которые дают как изменить Внутренний 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);
    });
}
Поделиться
8

вы можете использовать html или текстовую функцию в jquery для ее достижения

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

ИЛИ

$("#regTitle").text("hello world");
Поделиться
8

Ответ:

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

Объяснение:

$ эквивалентно jQuery. Оба представляют один и тот же объект в библиотеке jQuery. "#regTitle" внутри скобки называется селектором , который используется библиотекой jQuery для определения того, какой элемент html DOM (Document Object Model) вы хотите применить. # до regTitle сообщает jQuery, что regTitle является идентификатором элемента внутри DOM.

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

Поделиться
7

jQuery .html() может использоваться для установки и получения содержимого совпадающих непустых элементов (innerHTML).

var contents = $(element).html();
$(element).html("insert content into element");
Поделиться
  • 0
    Открывающая и закрывающая скобки после html спасли меня. Так что помните, ребята, эти двое важны.
6 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $( document ).ready(function() {
        $('.msg').html('hello world');
      });
    </script>

  </head>
  <body>
    <div class="msg"></div>
  </body>
</html>
Поделиться
3

Просто чтобы добавить представление о производительности.

Несколько лет назад у меня был проект, в котором у нас были проблемы при попытке установить большой HTML/Text для различных элементов 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 
$("#regTitle")[0].innerHTML = 'Hello World';
Поделиться
0

В jQuery есть несколько функций, которые работают с текстом, если вы используете text(), он сделает эту работу за вас:

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

Кроме того, вы можете использовать вместо html(), если у вас есть какой-либо HTML-тег...

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню