如果我知道<div>
的ID,如何将文字附加到特定<div>
?
例如,这是我的代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function appendDIV(idDIV, txt) {
$("#" + idDIV).append('<p>' + txt + '</p>');
}
appendDIV("content-01", "some text");
</script>
<div id="content-01" style="float: left; width: 150px; height: 150px; border: 2px solid red;"></div>
函数接受<div>
的ID和一些文本,但没有任何反应
出了什么问题?
答案 0 :(得分:1)
用于获取每个p
的代码的代码,你应该这样做
// Shorthand for $( document ).ready()
$(function() {
appendDIV("content-01", "some text");
//get all p element and go through each
$('#content-01 > p').each(function( index ) {
console.log( index + ": " + $( this ).text() );
console.log( "id of element" + $(this).attr('id'));
});
});
function appendDIV(idDIV, txt) {
$("#" + idDIV).append('<p>' + txt + '</p>');
}
你应该允许在进行任何操作之前先加载DOM,所以为此你应该用jquery中提供的document.ready
方法编写代码,当DOM准备就绪时调用它
// Shorthand for $( document ).ready()
$(function() {
appendDIV("content-01", "some text");
});
按上述方式添加代码。那样做。请在此处阅读:$( document ).ready()
答案 1 :(得分:0)
你也可以考虑一个自定义触发器,传递值,例如,如果你想在DIV上点击事件,然后插入一些东西:
$('body').on('appenddiv', function(event, idDIV, txt) {
$("#" + idDIV).append('<p>' + txt + '</p>');
});
// some where later in code:
$(".mydiv-group").on('click', function() {
let myid = $(this).attr('id');
let mytext = myid + ": some text";
$('body').trigger('appenddiv', [myid, mytext]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv-group" id="content-01" style="float: left; width: 150px; height: 150px; border: 2px solid red;"></div>
<div class="mydiv-group" id="content-02" style="float: left; width: 150px; height: 150px; border: 2px solid red;"></div>