Wrap Link <A> Around <Div>

Wrapping DIV inside Anchor tag or otherwise

HTML5, you can wrap a DIV inside an A anchor

<a href="page1.html">
    <div>
        <!-- complex layout - WITHOUT ANCHORS OR BUTTONS -->
    </div>
</a>

only if inside  you don't have another <a> or Form-action elements like <button> etc.

Otherwise you can do:

<div id="#redirectLink" data-link="page1.html">
    <!-- complex layout -->
</div>

<script>
document.querySelectorAll("[data-link]").forEach( el =>  {
   el.addEventListener("click", () => window.location.href = el.dataset.link);
});
</script>

or simply:

<div id="#redirectLink" onclick="window.location.href='page1.html';">
    <!-- complex layout -->
</div>

but inline JavaScript is bad design since hard to maintain and debug, so prefer having it in your script files.

wrap anchor around div

Nested anchor tags are illegal in HTML 4: http://www.w3.org/TR/html401/struct/links.html#h-12.2.2

Any interactive content cannot be nested in HTML 5: http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-a-element
A link counts as an "interactive" element.

How to wrap a link around a div jQuery?

Your wrapAll() expression doesn't modify what the variable div is. It returns a new object.

You are still appending the original i element only

I would suggest you create 2 elements or do this all as html string

// create `<i>`
var $i = $('<i>',{class: 'fa fa-twitter'});
// create <a> and append <i>
var $a = $('<a>', {href:link}).append($i);
// append complete <a> to dom
$(".icons").append($a);

How to use Link to wrap div in react?

Use a span inside your link, and set display: block on it as well, that will definitely work everywhere, and it will validate!

<Link to="/promospace/detail">
    <span className="card" style={{"display": "block"}}>
        /* content */
    </span>
</Link>

Or else you can do dynamic routing on an onClick event

changeRoute = () => {
    this.context.router.push('/promospace/detail');
}
......
<div className="card" onClick={this.changeRoute}>
        /* content */
</div>

....
MyComponent.contextTypes = {
     router: React.PropTypes.func.isRequired
}

Can wrapping a div or an anchor tag around a LI still be considered valid html structure

No, it is not valid, though it often works.

Yes, the reason most people do like this is to make it clickable.

There is many ways to make any element besides an anchor clickable, where wrapping an anchor around it is the most used.

This is valid for all non block level elements, but will likely work on all element level types because of event bubbling.

For block level elements (can also be used on inline elements), one can do like this, to make the whole element clickable

HTML

<div class="clickable"><a href='....'></a></div>

CSS

.clickable a {
  display: inline-block; height: 100%; width: 100%;   /*  fill the parent  */
}

An alternative when one just can't use an anchor and still need it clickable, would be by using a click handler, like this, using jQuery.

$( "li" ).click(function() {
  // Do something here on click
});

Wrapping up a div and anchor tag from given data

The observed result is the expected one, since everything is chained in your enter selection.

The solution is just breaking that enter selection, which append divs. Then, you append the <p> and <a> elements separately:

var data = [{  country: "America",  href: "/america"}, {  country: "France",  href: "/france"}];
var divs = d3.select("#countries")  .selectAll('div')  .data(data)  .enter()  .append("div");
divs.append("p")  .text(function(d) {    return d.country;  });
divs.append("a")  .attr('href', function(d) {    return d.href;  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script><div id="countries"></div>

wrap anchor tag around parent element

Try this if you don't want to use wrap function and you want to use common jQuery functions:

;(function(p){
    $("<a target='_blank' href='"+p.find("a").attr("href")+"'></a>").insertBefore(p).append(p);
})($(".parent-div"));

But nested anchor is not valid. For solve this problem you can update above code similar this:

 ;(function(p){
    var a=p.find("a");
    $("<a target='_blank' href='"+a.attr("href")+"'></a>").insertBefore(p).append(p);
    $("span").insertBefore(a).html(a.html());
    a.remove();
  })($(".parent-div"));