How to dynamically add a link to a parent div

Question

In my snippet below you will see a blue and red block. The red is indicating that a specific duty is not completed. What I am trying to do for these unfinished duties is dynamically make its outer div (one of these #account-unfinished-package, #account-unfinished-logo ) to act as a link.

I am unsure of how to do this dynamically, since the duties (blocks) will be changing from unfinished/finished. I do not want the finished blocks to have links, or else I would just add it to the html.

Does anyone have any ideas of how I can make the outer divs for the unfinished blocks act as a link dynamically?

Here is a jsfiddle.

 var unfinishedPack = 1; var unfinishedLogo = 0; if (unfinishedPack == 0) { $('#account-unfinished-package').addClass('red'); $('#unfinished-title-package').html('Product package needs setup.'); $('#unfinished-img-package').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/error-circle.png' class='unfinished-img' alt='Package Needs Setup'>"); } else if (unfinishedPack > 0) { $('#account-unfinished-package').addClass('blue'); $('#unfinished-title-package').html('Product Package Setup Complete!'); $('#unfinished-img-package').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/checkmark-circle-white.png' class='unfinished-img' alt='Package Complete'>"); } if (unfinishedLogo == 0) { $('#account-unfinished-logo').addClass('red'); $('#unfinished-title-logo').html('Company logo needs added. <a href="#">Click to add</a>'); $('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/error-circle.png' class='unfinished-img' alt='Logo Needs Added'>"); } else if (unfinishedPack > 0) { $('#account-unfinished-logo').addClass('blue'); $('#unfinished-title-logo').html('Account Logos Complete!'); $('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/checkmark-circle-white.png' class='unfinished-img' alt='Logo Complete'>"); } 

 #account-unfinished { width: 100%; height: auto; /*color: #D8000C;*/ /*background: #FFBABA;*/ margin-bottom: 10px; display: none; } #account-unfinished.block { display: block; } #account-unfinished-package, #account-unfinished-logo { width: 50%; height: 100%; display: inline-block; vertical-align: top; } #account-unfinished-package.red, #account-unfinished-logo.red { background: #D8000C; height: 100%; } #account-unfinished-package.blue, #account-unfinished-logo.blue { background: #09afdf; height: 100%; } .account-unfinished-inner { padding: 15px; } .account-unfinished-title { font-size: 1.5rem; color: #FFF; font-family: 'Lato', sans-serif; line-height: 1.4em; text-align: center; } .account-unfinished-title a { color: #FFF; } #unfinished-img-package, #unfinished-img-logo { margin: 10px auto; display: block; text-align: center; } .unfinished-img { height: 50px; width: 50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="account-unfinished-package"> <div class="account-unfinished-inner"> <p class="account-unfinished-title" id="unfinished-title-package"></p> <div id="unfinished-img-package"></div> </div> </div><div id="account-unfinished-logo"> <div class="account-unfinished-inner"> <p class="account-unfinished-title" id="unfinished-title-logo"></p> <div id="unfinished-img-logo"></div> </div> </div> 

Answer 1

Use the wrapInner function:

if (unfinishedLogo == 0) {
  $('#account-unfinished-logo').addClass('red');
  $('#account-unfinished-logo').wrapInner('<a href="https://google.com"></a>');
  $('#unfinished-title-logo').html('Company logo needs added. <a href="#">Click to add</a>');
  $('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/error-circle.png' class='unfinished-img' alt='Logo Needs Added'>");
}
else if (unfinishedPack > 0) {
  $('#account-unfinished-logo').addClass('blue');
  $('#unfinished-title-logo').html('Account Logos Complete!');
  $('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/checkmark-circle-white.png' class='unfinished-img' alt='Logo Complete'>");
}

I made you a fiddle: https://jsfiddle.net/4mLjdee5/