Insert An Element

To insert an element as the last child, use the jQuery method append

<ol id="pets">
  <li>Dog</li>
  <li>Tarantula</li>
</ol>

cy.get('#pets').invoke('append', '<li>Cat</li>')
// confirm there are 3 list items
// using the "read" assertion from the cypress-map plugin
cy.get('#pets li').should('read', ['Dog', 'Tarantula', 'Cat'])

Insert in the middle

<ol id="pets">
  <li>Dog</li>
  <li>Tarantula</li>
</ol>

In this case, we can use jQuery method after to insert a new element after the first element.

cy.get('#pets li')
  .should('have.length', 2)
  .first()
  .invoke('after', '<li>Cat</li>')
// confirm there are 3 list items
// using the "read" assertion from the cypress-map plugin
cy.get('#pets li').should('read', ['Dog', 'Cat', 'Tarantula'])