JSFiddle - React, Tailwind, and code Playground

by alanhogan

HTML

<h3>jQuery.html()</h3>
<div class="box"></div>

<div class="">
    <input type="button" value="Remove A tag(s) above" id="test" />
</div>

<div class="results"></div>

<hr />
<h3>.innerHTML</h3>
<div class="box2"></div>

<div class="">
    <input type="button" value="Remove A tag(s) above" id="test2" />
</div>

<div class="results2"></div>

CSS

h3 {
    font-weight: bold;
}
.box, .box2 {
    border: 1px solid #a82;
    min-height: 1em;
    margin: 1em 0;
}
hr {
    margin: 1em;
}

JavaScript

var content = '<a href=http://google.com/>Google</a>';    

$('.box').html(content);

$('#test').click(function(){


    $('.results').text($('.box a').size() + ' <a> tags found and removed. First one’s `href` attribute: '+$('.box a:first').attr('href')); 
    $('.box a').remove();

});

// Raw .innerHTML

$('.box2')[0].innerHTML = content;

$('#test2').click(function(){

 
    $('.results2').text($('.box2 a').size() + ' <a> tags found and removed. First one’s `href` attribute: '+$('.box2 a:first').attr('href'));
    $('.box2 a').remove();

});