获取带有 javascript 的元素中的最后一个 <a> 标签

Question

考虑以下 html

<p id="PgLnks">
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<P></P>
<P></P>
</p>

如何从Id为PgLnks的

标签中获取最新的标签？

我试过了但是没用

document.getElementsById('PgLnks').querySelectorAll('a:last-child').outerHTML;

Answer 1

使用 getElementById 而不是 getElementsById
使用 index 作为 .querySelectorAll('a:last-child')[0] 然后 .outerHTML
您的 HTML 也是无效的，因为 p 元素可能不包含其他块元素。因此，当您检查 rendered html 时，您会看到总共四个 p 标签，当第二个 p 开始时，它会自动关闭现有的 p 标签。

试试 document.getElementById('PgLnks').querySelectorAll('a:last-child')[0].outerHTML

let lastA = document.getElementById('PgLnks').querySelectorAll('a:last-child')[0].outerHTML;
console.log(lastA)

<p id="PgLnks">
  <a></a>
  <a></a>
  <a></a>
  <a></a>
  <a>sss</a>
  <P></P>
  <P></P>
</p>

如果你不能使用<%= PgLnks.ClientID %>，你可以尝试attribute selector作为querySelectorAll('[id$=PgLnks]')而不是getElementById('PgLnks')。

[attr^=value] ：表示属性名称为 attr 的元素，其值以值.
[attr$=value] ：表示属性名称为 attr 的元素，其值后缀（后跟）值.
[attr*=value] ：表示属性名称为 attr 的元素，其 value 至少包含一次 字符串中的值.

let lastA = document.querySelectorAll('[id$=PgLnks]')[0].querySelectorAll('a:last-child')[0].outerHTML;
console.log(lastA)

<p id="ctl13_ctl00_PgLnks" style="color: #0066ff;" align="center">

۶۷۳ رکورد پیدا شد | در زمان ۳۵ میلی ثانیه | نمایش در ۱۲ صفحه 
<br>
&nbsp;
<a href="/Admin.aspx?mod=Reports&amp;Knd=PersReport&amp;do=Se&amp;FID=2&amp;Page=1">
<img src="Images/Icons/PgPrev.gif" border="0" title="صفحه قبل" align="absmiddle">
</a>
<a href="/Admin.aspx?mod=Reports&amp;Knd=PersReport&amp;do=Se&amp;FID=2&amp;Page=1" style="background-color:#ffffef;padding:3px;border:#a0a0a0 solid 1px;"> &nbsp; ۱ &nbsp; </a>
<a href="/Admin.aspx?mod=Reports&amp;Knd=PersReport&amp;do=Se&amp;FID=2&amp;Page=3"><img src="Images/Icons/PgNext.gif" border="0" title="صفحه بعد" align="absmiddle"></a></p>

获取带有 javascript 的元素中的最后一个 <a> 标签

Get Last <a> tag in element with javascript

javascript

getelementbyid