Почему "<a></a>" не становится родительским элементом при добавлении его через jQuery?

Question

Я создаю элементы с jQuery и затем добавляю их к существующим HTML. Вот мой jQuery код:

var h1 = $(data2).find("h1").html();
var image = $(data2).find(".tutorialContent .wsite-image:first-child").html();
$(".searchResults").append('<a class="searchResultsImageTitle">' + '<div class="searchResultsImage">' + image + '</div>' + '<div class="searchResultsTitle">' + h1 + '</div>' + '</a>');});

Я хочу, чтобы код выше произвел это HTML:

<a class="searchResultsImageTitle">
  <div class="searchResultsImage"></div>
  <div class="searchResultsTitle"></div>
</a>

Но вместо этого я получаю это HTML:

<a class="searchResultsImageTitle"></a>
<div class="searchResultsImage"></div>
<div class="searchResultsTitle"></div>

Answer 1

Я ценю все ответы! Я обнаружил, что проблема заключается в конфликте между кодом jQuery и HTML, которую вытягивала одна из переменных. Спасибо всем!

Answer 2

Я немного разбил его, но это должно сработать

const $a = $('<a class="searchResultsImageTitle">');
const $d1 = $('<div class="searchResultsImage">');
const $d2 = $('<div class="searchResultsTitle">');

$a.append($d1);
$a.append($d2);
$(".searchResults").append($a);

Answer 3

при удалении}); в конце вашего append() работает:

let image = "<img src='https://dummyimage.com/100x100/000/fff'/>";
let h1 = "<h1>Title</h1>";
$(".searchResults").append('<a class="searchResultsImageTitle">' + '<div class="searchResultsImage">' + image + '</div>' + '<div class="searchResultsTitle">' + h1 + '</div>' + '</a>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searchResults">
</div>

Answer 4

Ваш код имеет синтаксис ошибки, уточнил, код тега по-прежнему переносится на 2 деления внутрь как

<a class="searchResultsImageTitle">
  <div class="searchResultsImage"></div>
  <div class="searchResultsTitle"></div>
</a>

$(".searchResults").append('<a class="searchResultsImageTitle" href="#">' + '<div class="searchResultsImage">' + 'image' + '</div>' + '<div class="searchResultsTitle">' + 'h1' + '</div>' + '</a>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searchResults"></div>