Добавление нескольких HTML-элементов с использованием Jquery

Question

Я новичок в jQuery и задаюсь вопросом, может ли кто-нибудь посоветовать мне лучшие практики ...

Я хочу добавить элемент div на страницу, которая содержит много html-файлов, и не уверен, каков наилучший способ добиться этого .... или если это целесообразно с помощью jquery ...

Например, если я хочу добавить следующий код на страницу с помощью jquery, то как лучше всего.

<div id="test">
    <h1>This is the test</h1>
    <p>Hello, just a test</p>
    <a href="www.test.com">Click me</a>
    <a href="www.test.com">Click me again</a>
</div>

Answer 1

Если вы хотите добавить HTML как есть, просто используйте функцию добавления jQuery. Например:

$('body').append('
<div id="test">\
    <h1>This is the test</h1>\
       <p>Hello, just a test</p>\
       <a href="www.test.com">Click me</a>\
       <a href="www.test.com">Click me again</a>\
</div>');

Измените селектор из тела на другой элемент / селектор DOM согласно вашему требованию.

Или, если у вас уже есть элемент div с идентификатором «test» в документе, вы можете установить содержимое с помощью функции html (), как показано ниже:

$("#test").html('<h1>This is the test</h1>\
       <p>Hello, just a test</p>\
       <a href="www.test.com">Click me</a>\
       <a href="www.test.com">Click me again</a>');

Answer 2

$("#id_of_div").append($("#id_of_div_that_you_wanna_append").html());

Answer 3

$("#test").append("YOUR CONTENT GOES HERE");

Answer 4

В настоящее время существуют следующие методы:

1. Используйте «+» для объединения фрагментов HTML-кода.

2. Используйте «\» для выхода.

3. Используйте "` "(обратный тик, серьезный акцент ), никаких дополнительных операций не требуется.Этот метод поддерживается в ES2015 / ES6 ( Шаблонные литералы ).

4. Добавить скрытый tag, содержащий тот же необходимый HTML-код, например, <p id="foo" style="display:none;">,затем используйте .append($('#foo').html());.

   Теперь опубликуйте некоторые сценарии использования в first three methods, упомянутом выше (просто запустите их в консоли браузера Chrome):

Мы ясно видим их различия.

Answer 5

С ES6 (ECMAScript 2015) теперь вы можете использовать обратные метки, чтобы окружить весь HTML, даже с одинарными или двойными кавычками (полезно также для добавления переменных между ними). ​​

Однако, поскольку вопрос, казалось, сосредоточен на добавлении всего блока после некоторого существующего элемента, возможно, метод after будет более подходящим, чем append один в этом случае. Это разница между ними (запустить фрагмент):

let $num = 0;
$('main').append(`
  <article>
    <h2>Appended ${++$num}</h2>
    <p>Using 'single' and "double-quotes" without escaping!</p>
  </article>
  
  <article>
    <h2>Appended ${++$num}</h2>
    <p>Using 'single' and "double-quotes" without escaping!</p>
  </article>
`).after(`
  <footer>
    <h2>Added after main</h2>
    <p><b>${++$num} blocks</b> of multiple elements were added through jQuery</p>
  </footer>
`);

article {background: #eee;border:1px solid #000;padding:1rem}
main {background: #ccc;padding:1rem}
body {background: #aaa;padding:1rem}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <h1>Main section</h1>
  <article>
    <h2>jQuery</h2>
    <p>Adding multiple elements...</p>
  </article>
</main>

Примечание

Вы также можете использовать эквивалент insertAfter и appendTo, если вы предпочитаете этот альтернативный синтаксис: $('<p>my html</p>').insertAfter('main')

Объект jQuery, содержащий блоки HTML, которые нужно добавить, идет первым, и вам нужно только сослаться на строку в параметре метода.