How do I create a Div around this append line?

Viewed 61

I have this line of jQuery:

$('.object1').append('<a href=" ' + linkURL + ' "> ' + headlineText + '</a>');

This creates a link on the website.

I want to then take that created link and wrap it in a div specific to it, with class name "linkdiv".

Any ideas? Am lost.

2 Answers

You can wrap div around a in string parameter or you can use wrap() function.

const linkURL = "someUrl";
const headlineText = "someText";
$('.object1').append('<div class="linkdiv"><a href="   ' + linkURL +  '   ">' + headlineText +  '</a></div>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="object1">Here:</div>

Vanilla JS (without jQuery) solution:

const linkURL = "someUrl";
const headlineText = "someText";

// create div
const divEl = document.createElement("div");
divEl.classList.add("linkdiv");

// create link
const linkEl = document.createElement("a");
linkEl.href = linkURL;
linkEl.innerHTML = headlineText;

// append link to div
divEl.append(linkEl);

// append div to body
document.body.append(divEl);

Take a look at jquerys wrap method.

In your case:

$('.object1')
  .append('<a href="   ' + linkURL +  '   "> ' + headlineText +  '</a>')
  .wrap("<div class='linkdiv'></div>");
Related