it-swarm.com.ru

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

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

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

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

923
tonyf
$("#regTitle").html("Hello World");
1381
Zed

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

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

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

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

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

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

Или же:

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

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

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

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

Ответ:

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

Объяснение:

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

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

10
Webeng

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

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

OR

$("#regTitle").text("hello world");
9
jitendra varshney

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

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

Пример

$( 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
Nikit Barochiya
$("#regTitle")[0].innerHTML = 'Hello World';
5
Al.UrBasebelon Tomeh

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

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

4
Pavel Donchev

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

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

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

1
Alireza