1017

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

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

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

javascript jquery html innerhtml tonyf
источник

1531

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

Zed
источник

320

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

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

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

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

zombat
источник

12

msgstr "но держите структуру html". Вы можете объяснить?

Anoop Joshi

10

Из документации JQuery API ( api.jquery.com/text ), text()отличается , как: Unlike the .html() method, .text() can be used in both XML and HTML documents.. Кроме того, согласно stackoverflow.com/questions/1910794/... , jQuery.html() treats the string as HTML, jQuery.text() treats the content as text.

Gorgsenegger

1

@AnoopJoshi stackoverflow.com/questions/1910794/…

Machavity

69

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

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

Или:

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

киношный
источник

17

Хорошее место для использованияitemtoReplaceContentOf.empty();

Кевин Панко

Является newcontentли объект jQuery? Это не ясно

kmoser

@kmoser В первом примере newcontent действительно является объектом jquery. Во втором примере это может быть тип htmlStringили Elementили Textили Arrayили jQueryсогласно api.jquery.com/append

Cine

27

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

//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

Ответ:

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

Объяснение:

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

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

Webeng
источник

11

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

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

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

ИЛИ

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

Джитендра Варшней
источник

9

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

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

Pratik
источник

Открывающая и закрывающая скобки после html спасли меня. Так что помните, ребята, эти двое важны.

Гелли Энн

9

пример

$( 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

$("#regTitle")[0].innerHTML = 'Hello World';

Al.UrBasebelon Tomeh
источник

3

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

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

Павел Дончев
источник

3

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

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

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

Алиреза
источник

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

Ответы:

Используйте анимацию, чтобы изменить внутренний HTML