如何将元素添加为文章元素的最后一个子元素

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. 使用document.getElementById()来获取<article>
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更干净，但有时best solution却不干净。

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>