我需要在HTML中单击按钮时触发类“Alert Success”，
代码是:
null
function appendText() {
var title = $("#title").val();
var content = $("#content").val();
var type = $("#type").val();
var markup = "<div>" + title + content + "</div>";
$(".alert success").append(markup);
$(".closebtn").append()
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="margin-top: 2%">
<select id="type">
<option value="success">success</option>
<option value="info">info</option>
<option value="warning">warning</option>
<option value="error">error</option>
</select>
<label for="title">title:</label>
<input type="text" value="title" id="title">
<label for="content">content:</label>
<input type="text" id="content" value="content" style="width: 50%">
<button onclick="appendText()">Add Notification</button>
</p>null
我需要在单击按钮时动态创建以下HTML代码。
<div class="alert success">
<span class="closebtn">×</span>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
您能为我的需要建议正确的Jquery代码吗？
null
function appendText() {
var title = $("#title").val();
var content = $("#content").val();
var type = $("#type").val();
var result = '<div>'
+ title + ' ' + content
+ '<div class="alert success">'
+ '<span class="closebtn">×</span>'
+ '<strong>Success!</strong> Indicates a successful or positive action.'
+ '</div>'
+ '</div>';
$('#result').append(result);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="margin-top: 2%">
<select id="type">
<option value="success">success</option>
<option value="info">info</option>
<option value="warning">warning</option>
<option value="error">error</option>
</select>
<label for="title">title:</label>
<input type="text" value="title" id="title">
<label for="content">content:</label>
<input type="text" id="content" value="content" style="width: 50%">
<button onclick="appendText()">Add Notification</button>
</p>
<div id="result"></div>
这里是工作和简化的片断。
它附加通知数据和CloseBTNclose按钮也在工作，并删除单击的通知。
只需运行snippet以查看实际操作。
null
function appendText() {
var title = $("#title").val();
var content = $("#content").val();
var type = $("#type").val();
var markup = "<div class='results'><button class='closebtn' onclick='closeAlert(this)'>X</button> " + type + ' ' + title + ' ' + content + "</div>";
if (type === 'success') {
$('.messages').css({
"background-color": "green"
});
} else if (type === 'warning') {
$('.messages').css({
"background-color": "yellow"
});
} else if (type === 'error') {
$('.messages').css({
"background-color": "red"
});
} else if (type === 'info') {
$('.messages').css({
"background-color": "blue"
});
}
$(".messages").html(markup);
}
function closeAlert(_this) {
$(_this).parent().remove()
}label,
button {
display: block;
}
.results {
display: flex;
padding: 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="margin-top: 2%">
<select id="type">
<option value="success">success</option>
<option value="info">info</option>
<option value="warning">warning</option>
<option value="error">error</option>
</select>
<label for="title">title:</label>
<input type="text" value="title" id="title">
<label for="content">content:</label>
<input type="text" id="content" value="content" style="width: 50%">
<button onclick="appendText()">Add Notification</button>
</p>
<div class="messages"></div>
对于HTML标记或内容
var content = "Hello World";
$(".className").html(content);
或
var content = "<b>Hello World</b>";
$(".className").html(content);
