Как мне добавить элемент после определенного элемента, используя jquery с объектом в качестве цели?

#javascript #jquery #html #element

#javascript #jquery — запрос #HTML #элемент #jquery

Вопрос:

Я хочу добавить элемент H2 <h2>H2</h2> к html, как показано ниже

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="a">
        <h1>H1</h1>
        <!--I want to add H2 here-->
        <h3>H3</h3>
    </div>
    <div id="b">

    </div>
</body>
</html>

Я запрашиваю div следующим образом var mydiv = $("#a")[0]; , а затем я хочу добавить <h2>H2</h2> внутри myDiv, но после <h1>H1</h1> ИЛИ до <h3>H3</h3> . Я немного поиграл с after (), insertAfter(), before(), insertBefore(), но безуспешно, потому что я хочу настроить таргетинг и использовать объект ‘myDiv’, а не всю HTML-страницу.

РЕДАКТИРОВАТЬ: Некоторые вещи, которые я пробовал

Я попробовал следующее:

 var myDiv = $("#a")[0]
$(myDiv).append("<h2>H2</h2>")

Это добавляет элемент в конец div

Тоже пробовал это:

 $("h1").after("<h2>H2</h2>")

Это добавляет <h2>H2</h2> после каждого <h1>H1</h1> , что мне не нужно делать, мне нужно добавить <h2>H2</h2> только внутри выбранного div, который в данном случае myDiv

1. Всегда показывайте, что вы пробовали, но это не работает

2. Я отредактировал некоторые вещи, которые я пробовал, проблема в цели. Я хочу настроить таргетинг на выбранный div, а не на всю HTML-страницу. Это пример, на реальной html-странице у меня есть несколько H1s, и использование after добавило бы H2s после каждого H1, то же самое с before () и H3s.

Ответ №1:

Используйте jQuery#after и jQuery#find

 var myDiv = $("#a")[0];
$(myDiv).find('h1').after("<h2>H2</h2>");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">
  <h1>H1</h1>
  <!--I want to add H2 here-->
  <h3>H3</h3>
</div>
<div id="b"></div>

или

 $("#a").find("h1").after("<h2>H2</h2>");

или

 $("#a h1").after("<h2>H2</h2>");

1. Эй, этот slector изменил ситуацию .. есть ли способ вместо использования $('#a h1') как-то нацелиться на h1, но использовать существующий объект, как myDiv у меня в примере?

2. @user2052544 вам нужно использовать find или что-то подобное, проверьте обновленный ответ

3. Понятия не имел, что мы можем соединять after() одно find() за другим… всегда учусь. Отлично, попробовал это с реальным html, который у меня есть, и сработал, как ожидалось. Спасибо!

Ответ №2:

Ваш код верен, нужно только изменить селектор, добавив h1 в селектор myDiv.

Пример:

var myDiv = $("#a h1")[0] $(myDiv).after("<h2>H2</h2>")

1. append() добавляет элемент в конец, а prepend() — в начало. Пробовал это, но это не то, что я хотел. Я принял предыдущий ответ как правильный, посмотрите, пожалуйста.

2. Извините, я прочитал ваш последний фрагмент кода и подумал, что вместо «добавить» будет указано «после». Отредактировано.