Question

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

Answer 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()

Answer 2

你也可以考虑一个自定义触发器，传递值，例如，如果你想在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>

将文本添加到特定DIV

2 个答案: