как добавить элемент как последний дочерний элемент статьи

Question

<article>
<div><p></p></div>

<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<img/>
<p> i want to add element after this</p>


</article>

У меня есть элемент article, в котором многие элементы являются его дочерними элементами. Я хочу добавить последний элемент перед закрытием тега элемента article.

Я хочу, чтобы какой-нибудь код в jquery делал это случайным образом во время выполнения.

Мое намерение - добавить перед элементом статьи lastelemnt просто образец, так как здесь это может быть div, ul и т. Д.

Answer 1

через JQuery

$("article").last().after( "<p>Test</p>" )

Answer 2

Чистый Javascript

Вы можете использовать чистое решение javascript, как показано ниже. Этот код:

1. Получает <article> с помощью document.getElementById()
2. Использует .appendChild(), чтобы добавить вновь созданный элемент в конец последнего дочернего элемента (который является концом статьи).

var article = document.getElementById("article");
var element = document.createElement("h1");
var text = document.createTextNode("Test");
element.appendChild(text);

article.appendChild(element);

#article {
  background-color: red;
}

<article id="article">
  <div>
    <p></p>
  </div>

  <div>
    <p></p>
  </div>
  <div>
    <p></p>
  </div>
  <div>
    <p></p>
  </div>
  <div>
    <p></p>
  </div>
  <div>
    <p></p>
  </div>
  <img/>
  <p> i want to add element after this</p>


</article>

JQuery

Это решение использует jQuery. Этот код использует .append() для добавления элемента в конец статьи. Лично я считаю, что jQuery чище, но иногда не лучшее решение .

var article = document.getElementById("article");
var element = document.createElement("h1");
var text = document.createTextNode("Test");
element.appendChild(text);

$("#article").append(element);

#article {
  background-color: red;
}

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

  <div>
    <p></p>
  </div>
  <div>
    <p></p>
  </div>
  <div>
    <p></p>
  </div>
  <div>
    <p></p>
  </div>
  <div>
    <p></p>
  </div>
  <img/>
  <p> i want to add element after this</p>


</article>

Answer 3

Вы можете использовать .append(): $("article").append( "<p>Test</p>" );

.append(): вставлять содержимое, заданное параметром, в конец каждого элемента в наборесогласованные элементы.

$(document).ready(function(){
  $("article").append( "<p>Test</p>" );
});

article{
  background-color:red;
}

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

<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<img/>
<p> i want to add element after this</p>


</article>