Как заменить innerHTML div с помощью jQuery?

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

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

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

881
html innerhtml javascript jquery

11 ответов

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

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

$('#regTitle').html('Hello World');
на text () функция изменит (текстовое) значение указанного элемента, но сохранит html структура. 
$('#regTitle').text('Hello world');
279

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

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

или:

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

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

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

ответ:

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

объяснение:

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

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

8

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

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

или

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

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

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

уже есть ответы, которые дают, как изменить внутренний 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);
    });
}
7
<!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>
6
$("#regTitle")[0].innerHTML = 'Hello World';
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