使用jQuery将打印按钮插入HTML

Question

我想在HTML页面中插入一个打印按钮。

你能帮我吗？

$('<a href="javascript:window.print()">print</a>').appendTo('.carContent')

Answer 1

试试这个：-

HTML

<div class="carContent">
</div>

jQuery的

 $('.carContent').append('<a href="javascript:window.print()">print</a>');

Answer 2

你做得对，在html之后添加jquery并在此之后执行脚本。

$('<a href="javascript:window.print()">print</a>').appendTo('.carContent');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   
<div class="carContent">
</div>
   

要么

   $('.carContent').append('<a href="javascript:window.print()">print</a>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carContent">
</div>

我在这个例子中添加了你评论的html：

$('<a href="javascript:window.print()">print</a>').appendTo('.carContent');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#coupon {
border-style: dashed;
border-width: 2px;
border-color: #CCCCCC;
}
.leasePrice {
display:block;
font-weight: bold;
font-size: 40px;
line-height: 20px;
color: #f6100c;
margin: 10px 0 0;
}
.leaseTerm {
display:block;
padding: 10px 0;
font-weight: bold;
font-size: 19px;
color: #f6100c;
}
.leaseDisclaimer { 
padding: 0 10px 10px 10px;
}
.carTitle {
display: block;
width: 100%;
text-transform: uppercase;
background-color: #3e3e3e;
font-family: 'oswald', sans-serif;
font-size: 30px;
color: #fff;
}
.carContent {
display: block;
width: 100%;
padding: 10px 15px 0 15px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #444444;
line-height: 18px;
}
.disclaimer {
display:block;
clear:both;
padding:10px;
background-color:#eeeeee;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:9px;
line-height:10px;
color:#444444;
margin:15px 15px 0px 15px;
}
.button {
background: #32abe8; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: background: #f70f32; /* Old browsers */
background: -moz-linear-gradient(top,  #f70f32 0%, #ee3856 50%, #dc082f 51%, #da0e33 71%, #d61841 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f70f32), color-stop(50%,#ee3856), color-stop(51%,#dc082f), color-stop(71%,#da0e33), color-stop(100%,#d61841)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f70f32 0%,#ee3856 50%,#dc082f 51%,#da0e33 71%,#d61841 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f70f32 0%,#ee3856 50%,#dc082f 51%,#da0e33 71%,#d61841 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f70f32 0%,#ee3856 50%,#dc082f 51%,#da0e33 71%,#d61841 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f70f32 0%,#ee3856 50%,#dc082f 51%,#da0e33 71%,#d61841 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f70f32', endColorstr='#d61841',GradientType=0 ); /* IE6-9 */


}
</style>
<ul class="large-block-grid-2">
<li>
<div id="coupon" class="">
<div class="row">
<div class="columns">
<div class="carTitle" style="text-align: center;">Free Stuff!!</div>
<center>
<a href="" >
<img src="https://s3.amazonaws.com/fzautomotive/dealers/59975421860ff.jpg">
</a>
</center>
<div class="carContent">
<div class="row">
<div class="large-6 columns text-center"> <span class="leasePrice">Free Stuff!!</span> <span class="leaseTerm"></span> </div>
<div class="large-6 columns text-center">
<ul style="text-align: left">
<li><b>FREE:</b> Car wash with any service or repair</li>
<li><b>FREE:</b> Soda and popcorn while you wait</li>
<li><b>FREE:</b> Local shuttle to home or office</li>
<li><b>FREE:</b> Multi-point vehicle inspection</li>
<li><b>FREE:</b> Coffee while you wait</li>
<li><b>FREE:</b>  Wifi</li>
</ul> <br>
<br>
</div>
</div>
</div>
<center>

</center>
</div>
<div class="disclaimer"> Offer Expires 12-31-2017.</div>
</div>
</div>
</li>
</ul>