は、別のhtmlファイルに追加した後にdivにアクセスできません。

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

.childrenの代わりに.findを使用してください。

.children（）メソッドは、（その.childrenで.find（）とは異なる）だけが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

childrenの代わりにfindを使用し、ドキュメントに準備ができているスクリプトを含めます。またはだけではなく、$('#divButton') ANS $(#divContent')を使用するIDが

$(function(){ 
 
$("#div1").find('#divButtons').append('<button>hello</button>'); 
 
$('#divButtons').append('<button>hello</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>