В JQuery .html (var) vs .html (var.html ())

Question

В JQuery .html (var) vs .html (var.html ())

0

Этот код предоставляется для контекста, см. Ниже мой вопрос:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {

        var newItem = $("<p>This is a new paragraph</p>");
        $("#para2").html(newItem.html());
    });
</script>
<style type="text/css">
.a { color: Navy; }
.b { color: Maroon; }
</style>
</head>
<body>
    <ul id="list1">
        <li class="a">item 1</li>
        <li class="a">item 2</li>
        <li class="b">item 3</li>
        <li class="b">item 4</li>
    </ul>
<p class="a">This is paragraph 1</p>
<p id="para2">This is paragraph 2</p>
<p class="b">This is paragraph 3</p>
<p>This is paragraph 4</p>
</body>
</html>'

Я заинтересован в этой части:

var newItem = $("<p>This is a new paragraph</p>");
    $("#para2").html(newItem.html());

Это функционально эквивалентно этому:

var newItem = $("<p>This is a new paragraph</p>");
    $("#para2").html(newItem);

Первый метод, я заметил в видео-демонстрации, которая учит jQuery. Насколько я знаю, что добавленная часть .html() - это получить соответствующий элемент. Мне кажется, что это не поможет, потому что в var newItem = $("This is a new paragraph"); $() уже сделал объект JQuery.

Вопрос:

Есть ли значимая и влиятельная разница между двумя вышеуказанными методами, или это просто вопрос кодирования?

Daniel Dropik 06 янв. 2014, в 02:44

Источник

0

$("This is a new paragraph"); это дополнительные издержки, которых можно избежать, просто добавив HTML-строку к элементу с нужным абзацем, например: var newItem = " Это новый абзац " и чем $("#para2").html( newItem )
Roko C. Buljan 06 янв. 2014, в 00:53
0

Создание объекта элемента в памяти, например, $("This is a new paragraph"); позволяет вам применять другие методы к этому объекту, такие как .find() т. д., в то время как использование метода String (как я описал выше) будет невозможно. В любом случае, наличие элемента Object и получение его HTML, такого как newItem.html() получит только его внутренний контекст HTML, а не весь элемент абзаца.
Roko C. Buljan 06 янв. 2014, в 00:57

Теги:

javascript

jquery

html

syntax

1 ответ

Ещё вопросы

$("This is a new paragraph"); это дополнительные издержки, которых можно избежать, просто добавив HTML-строку к элементу с нужным абзацем, например: var newItem = " Это новый абзац " и чем $("#para2").html( newItem )
Создание объекта элемента в памяти, например, $("This is a new paragraph"); позволяет вам применять другие методы к этому объекту, такие как .find() т. д., в то время как использование метода String (как я описал выше) будет невозможно. В любом случае, наличие элемента Object и получение его HTML, такого как newItem.html() получит только его внутренний контекст HTML, а не весь элемент абзаца.

Quentin · Answer 1 · 2014-01-05T23-05-00.000Z

html() сериализует HTML внутри элемента в строку.

В этом случае разница заключается в том, что $("#para2").html(newItem.html()); даст вам текст и $("#para2").html(newItem); даст вам абзац, содержащий этот текст.

Поскольку #para2 - это абзац, а HTML не допускает #para2 абзацев, последний также генерирует недопустимый HTML.

Если вы не создавали абзац с нуля одновременно (например, если var newItem = $("#existingParagraph");), то вы также будете перемещать элемент, а не копировать его содержимое.

Поскольку вы просто меняете текст в элементе, вначале нет необходимости создавать объект jQuery.

Эта:

    var newItem = $("<p>This is a new paragraph</p>");
    $("#para2").html(newItem.html());

эквивалентно:

    $("#para2").html("This is a new paragraph");

Спасибо за ответы. На первый взгляд, я не совсем понял ваш ответ. Затем я провел параллельное сравнение обоих методов с помощью инспектора firebug. Да, действительно, пропуская дополнительный .html() , он вызвал дополнительный элемент  .