Как заменить innerHTML div с помощью jQuery?
Как я мог достичь следующего:
document.all.regTitle.innerHTML = 'Hello World';
использование jQuery где regTitle
мой идентификатор div?
11 ответов
на HTML-код() функция может принимать строки HTML и эффективно изменять .innerHTML
собственность.
$('#regTitle').html('Hello World');
на 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. The "#regTitle"
внутри скобки называется селектор который используется библиотекой jQuery для определения того, к какому элементу(элементам) html DOM (объектной модели документа) вы хотите применить код. The #
до regTitle
говорит jQuery, что regTitle
является идентификатором элемента внутри дома.
оттуда, точечная нотация используется для вызова HTML-код функция, которая заменяет внутренний html любым параметром, который вы помещаете между скобками, который в этом случае является 'Hello World'
.
вы можете использовать функцию html или text в jquery для ее достижения
$("#regTitle").html("hello world");
или
$("#regTitle").text("hello world");
в jQuery .html()
может использоваться для установки и получения содержимого сопоставленных непустых элементов (innerHTML
).
var contents = $(element).html();
$(element).html("insert content into element");
уже есть ответы, которые дают, как изменить внутренний 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);
});
}
<!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>
просто, чтобы добавить некоторые показатели выводы.
несколько лет назад у меня был проект, где у нас были проблемы с установкой большого 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 и ссылки в ваших скриптах, указывающие на правильный объект.