将文本添加到特定DIV

时间:2018-06-15 17:09:38

标签: javascript jquery html

如果我知道<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和一些文本,但没有任何反应 出了什么问题?

2 个答案:

答案 0 :(得分:1)

用于获取每个p的代码的代码,你应该这样做

Working

// 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>');
  }

Working Demo

你应该允许在进行任何操作之前先加载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>