Question

<div id="div1">
  <div id="div2">
  </div>
  <div id="div3"></div>
  <div id="div4">
    <div id="div5">
      <div id="div6">
      </div>
      <div id="divcontent">
      </div>
    </div>
    <div id="divButtons">
    </div>
  </div>
  <div id="footer"></div>
</div>

我有上面的div，作为html文件，被附加到另一个html文件中。在附加此文件后，我想在divButtons中添加一些按钮，在divcontent中添加一些文本。不知怎的，我无法实现它。我试过了：

$("#div1").children('#divButtons').append('<button></button>');
$('#divButtons').append('<button></button>')

如果我做错了什么，请指导我。感谢

Answer 1

使用.find代替.children。

.children（）方法与.find（）的不同之处在于.children（）只在DOM树中传递单个级别

^{https://api.jquery.com/children/}

$("#div1").find('#divButtons').append('<button></button>');
$('#divButtons').append('<button></button>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <div id="div2">
  </div>
  <div id="div3"></div>
  <div id="div4">
    <div id="div5">
      <div id="div6">
      </div>
      <div id="divcontent">
      </div>
    </div>
    <div id="divButtons">
    </div>
  </div>
  <div id="footer"></div>
</div>

注意由于divButtons为id，因此您无需使用children或find，因为您知道它是唯一的。

Answer 2

使用find代替children，并将脚本包含在document，ready函数中。或者只使用$('#divButton') ans $(#divContent')，因为ID必须是唯一的

＆＃13;

$(function(){
$("#div1").find('#divButtons').append('<button>hello</button>');
$('#divButtons').append('<button>hello</button>')
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <div id="div2">
  </div>
  <div id="div3"></div>
  <div id="div4">
    <div id="div5">
      <div id="div6">
      </div>
      <div id="divcontent">
      </div>
    </div>
    <div id="divButtons">
    </div>
  </div>
  <div id="footer"></div>
</div>

＆＃13;

附加到另一个html文件

2 个答案: