Этот код предоставляется для контекста, см. Ниже мой вопрос:
<!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 = $("<p>This is a new paragraph</p>");
$() уже сделал объект JQuery.
Есть ли значимая и влиятельная разница между двумя вышеуказанными методами, или это просто вопрос кодирования?
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");
.html()
, он вызвал дополнительный элемент <p>
.
$("<p>This is a new paragraph</p>");
это дополнительные издержки, которых можно избежать, просто добавив HTML-строку к элементу с нужным абзацем, например: var newItem = "<p> Это новый абзац </ p>" и чем$("#para2").html( newItem )
$("<p>This is a new paragraph</p>");
позволяет вам применять другие методы к этому объекту, такие как.find()
т. д., в то время как использование метода String (как я описал выше) будет невозможно. В любом случае, наличие элемента Object и получение его HTML, такого какnewItem.html()
получит только его внутренний контекст HTML, а не весь элемент абзаца.