有一个文本框和一个按钮。点击按钮后，使用jQuery中的append()方法将文本框内容追加到<body>。此外，在追加时，我试图将style(即border-style)设置为我正在追加的标签。下面的代码没有达到我的预期:
<style>
.myStyle{
border-style:solid;
}
</style>
<script>
$(document).ready(function()
$("#btn2").click(function(){
var text=document.getElementById('txt1').value
$("body").append("<br><label class="myStyle">"+text+"</label>");
});
});
</script>
<input id="txt1" type="text">
<button id="btn2">Append list items</button>
在append部分添加<div>标签也无济于事。下面的代码有，但是第一个标签框没有边距:
<script>
$(document).ready(function()
$("#btn2").click(function(){
var text=document.getElementById('txt1').value
$("label").css("border-style","solid");
$("body").append("<br><label>"+text+"</label>");
});
});
</script>
<input id="txt1" type="text">
<button id="btn2">Append list items</button>
append() -ing和样式元素是怎么回事?我错过了什么?
$("body").append("<br><label class="myStyle">"+text+"</label>");
//---------------^-----------------^
// These are the same type of quotes
$("body").append('<br><label class="myStyle">'+text+'</label>');
//---------------^---------------------------^------^--------^
// Swap these four out with single quotes
你应该已经注意到在你的语法高亮中，myStyle变成了黑色，在字符串中显示了一个断点。
另外，如果您当前的编辑器没有显示此类错误，我建议您使用更好的编辑器。我个人使用WebStorm/PHPStorm。
另外，如果你打算使用jQuery，那就使用jQuery。
var text = $('#txt1').val();