在追加到另一個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

使用.find而不是.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

使用find而不是children幷包含腳本在文檔中，就緒功能。或者，而不是僅僅使用

$(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>