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

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

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

Используя jQuery где regTitle мой идентификатор Div?

Источник

14 ответов

Решение
$("#regTitle").html("Hello World");
Источник

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

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

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

$('#regTitle').text('Hello world');
Источник

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

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

Или же:

$('#regTitle').empty().append(newcontent);
Источник

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

//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();
Источник

Ответ:

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

Объяснение:

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

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

Источник

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

Вы можете использовать HTML или текстовые функции в JQuery для достижения этого

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

ИЛИ ЖЕ

$("#regTitle").text("hello world");
Источник

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

var contents = $(element).html();
$(element).html("insert content into element");
Источник 
<!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>
Источник 
$("#regTitle")[0].innerHTML = 'Hello World';
Источник

Чистый JS и самый короткий

Чистый JS

regTitle.innerHTML = 'Hello World'


regTitle.innerHTML = 'Hello World';
<div id="regTitle"></div>

Самый короткий

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


// note: no quotes around regTitle
$(regTitle).html('Hello World'); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="regTitle"></div>

Источник

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

Несколько лет назад у меня был проект, в котором у нас были проблемы при попытке установить большой 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 и ссылки в ваших скриптах указывали на нужный объект.

Источник

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

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

Также вы можете использовать html() вместо этого, если у вас есть тег HTML...

Источник 
      var abc = document.getElementById("regTitle");
abc.innerHTML = "Hello World";
Источник
Другие вопросы по тегам