JS DOM word highlighting and element appending

by Gustavo

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Lorem ipsum</title>
  </head>
  <body>
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum nisl eu imperdiet facilisis. Vivamus massa mauris, porta non congue nec, mattis a ex. Aenean efficitur congue justo, interdum venenatis diam iaculis id. Donec dignissim, odio eu tempor volutpat, risus lorem pulvinar enim, in feugiat dolor lorem in nisl. Etiam sed ex tempor, rutrum risus ut, rhoncus urna. Nullam at congue arcu. Sed eget neque a enim viverra sollicitudin. Vestibulum vel gravida nibh. Curabitur viverra interdum lorem id fringilla.

Sed nec sapien vel leo pharetra luctus a non orci. Sed in semper turpis. In sit amet sapien iaculis, euismod libero nec, tincidunt ligula. Ut ultricies sem odio, quis elementum metus cursus id. Pellentesque a pharetra tellus. Cras placerat sit amet nisi vel vulputate. Vivamus egestas est vitae elit interdum aliquet. Integer egestas vitae velit in ornare. Donec est massa, ultricies nec tincidunt vel, vehicula sollicitudin erat. Curabitur eu felis sem. Nam eleifend nisl a velit pretium, non ullamcorper diam imperdiet. Etiam vitae auctor turpis. Nunc ac massa non dolor accumsan elementum. Vivamus non venenatis enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras neque lacus, feugiat dignissim pellentesque vel, porta euismod ex.</p>
  </body>
</html>

CSS

.highlight {
  background-color: yellow; 
}

JavaScript

// Highlight all of the words over 8 characters long in the paragraph text

const p = document.querySelector('p');

p.innerHTML = p.innerHTML
	.split(" ")
  .map(word => word.length > 8 ? `<span class="highlight">${word}</span>` : word )
  .join(' ');


// Ad a link after the paragraph 

const link = document.createElement('a');
link.href = "https://www.lipsum.com/";
link.textContent = "Source";

document.body.appendChild(link);