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

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

960 голосов
/ 21 августа 2009

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

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

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

Ответы [ 12 ]

1430 голосов
/ 21 августа 2009 
$("#regTitle").html("Hello World");
307 голосов
/ 21 августа 2009

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

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

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

$('#regTitle').text('Hello world');
65 голосов
/ 11 августа 2011

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

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

Или: 

$('#regTitle').empty().append(newcontent);
27 голосов
/ 27 ноября 2013

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

//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();
11 голосов
/ 07 сентября 2016

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

Ответ: 

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

Пояснение:

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

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

10 голосов
/ 03 февраля 2017

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

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

OR 

$("#regTitle").text("hello world");
9 голосов
/ 16 октября 2014

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

var contents = $(element).html();
$(element).html("insert content into element");
8 голосов
/ 17 марта 2017

Пример 

$( 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>
5 голосов
/ 21 сентября 2017 
$("#regTitle")[0].innerHTML = 'Hello World';
Страница:
...