使用 Js 或 php 创建一个新按钮

Question

我的WP网站上有一个迷你购物车(下拉(。我已经设计了何时有产品和空的产品的设计。我之前和之后都使用CSS伪来添加内容。

也可以添加带有链接的按钮吗？我试图在它为空时有一个按钮。

以下是我的CSS和我尝试的Js代码，因为我无法访问html。

.woocommerce-mini-cart__empty-message{
padding-top: 30px;
text-align:center;
visibility:hidden;
color: #5D5D5D;
background-color:#F0EFEB;
pointer-events: none;
}
.woocommerce-mini-cart__empty-message::after{
content: 'Lets start shopping!';
visibility:visible;
display:block;
margin-top:2px!important;
font-size:14px!important;
line-height:20px!important;
font-family:futura!important;
pointer-events: none;
}
.woocommerce-mini-cart__empty-message::before {
content: url(http://naristore.com/wp-content/uploads/2018/01/shop- [e-mail]) 'A A YOUR BAG IS EMPTY';
white-space: pre;
visibility:visible;
display:block;
text-align:center;
color:#5D5D5D!important;
font-size:24px!important;
line-height:26px!important;
font-family:futura!important;
letter-spacing:1px;
pointer-events: none;
}

<script>
$(document).ready(function() {
$("<button>click</button").appendTo('.woocommerce-mini- cart__empty - message ');
});
</script>

Answer 1

我不确定你在问什么..您只是想添加一个按钮吗？如果是这样，请使用追加，而不是追加到。

<script>
$(document) .ready(function(){
var element= "<button>click</button";
$(".woocommerce-mini- 
cart__empty-message") .append(element)
});
</script>

Answer 2

尝试使用 JavaScript 而不是 jquery。

---

.btn-style {
display: inline-block;
padding: 15px 24px;
text-align: center;
border: none;
color: #fff;
background-color: #008CBA;
margin: 2px 5px;
text-decoration: none;
cursor: pointer;
font-size: .95em;
}

const woocommerce = document.querySelector('.woocommerce-mini-cart__empty-message');
const btn = document.createElement('button');
btn.textContent = 'Empty';
btn.className = 'btn-style';
woocommerce.appendChild(btn);

不要忘记选择添加的类btn样式并添加所需的样式。我添加了一些基本的 css。