时间戳

首页 > 解决方案 > 错误：无法在控制台中读取 null 的属性“insertAdjacentHTML”

javascript - 错误：无法在控制台中读取 null 的属性“insertAdjacentHTML”

问题描述

我有一些代码，但问题是它给了我一个错误：'Cannot read property 'insert-adjacent HTML' of null'。当我放这个时它来了：

let lastone = document.querySelector('.calender p:last-of-type');
lastone.insertAdjacentHTML("afterend", getDayMarkUp());


function getDayMarkUp() {
   <p class="day"></p>
}

但是当我放这个时我没有错误：

let lastone = document.querySelector('p:last-of-type');
lastone.insertAdjacentHTML("afterend", getDayMarkUp());


function getDayMarkUp() {
   <p class="day"></p>
}

HTML：

<p></p> <!-- I need this paragraph! -->
<section class="calendar">
    <p>sun</p>
    <p>Mon</p>
    <p>Tue</p>
    <p>Wed</p>
    <p>Thur</p>
    <p>Fri</p>
    <p>Sat</p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</section>

你能告诉我为什么会出现错误，如果可能的话，你如何解决它？

标签： javascript

解决方案

您有多种可能性：

  1. “日历”类的段落：
document.querySelector('p.calender:last-of-type')
  1. 具有“p”和“calender”类的元素：
document.querySelector('.p.calender:last-of-type')
  1. 选择所有元素，无论是段落元素还是日历类：
document.querySelectorAll('.calendar, p:last-of-type')
  1. 具有“日历”类的元素中的段落将使用您的错误抛出代码，因此显然这不是您想要的。

推荐阅读