HTMLElement.append不會追加 - JavaScript

-1

有什麼可能的原因導致此代碼無法將標籤追加到#abcde div？HTMLElement.append不會追加 - JavaScript

var div = $('#abcde'); 
       console.log(div); 
       div.append('<h1>Hi</h1>');

的console.log顯示：

b.fn.b.init[0] 
context: document 
selector: "#abcde" 
__proto__: Object[0]

HTML元素檢查：

<div class="km-scroll-container" style="-webkit-transform-origin: 0% 0%;"> 
    <h1 style="margin-left:auto;margin-right:auto;" class="pageTitle" id="singleClientHeading">Jacques Johnson</h1> 
    <div class="km-listview-wrapper"><ul class="listView km-widget km-listview km-list km-listinset" data-role="listview" data-style="inset"> 
     <li> 
      <label class="question">OID</label><label class="right_column_single_client" id="oid">2143.16</label> 
     </li> 
     <li> 
      <label class="question">NHI</label><label class="right_column_single_client" id="nhi">HGC4526</label> 
     </li> 
     <li> 
      <label class="question">Dwelling</label><label class="right_column_single_client" id="dwelling">TFR</label> 
     </li> 
    </ul></div> 
    <div id="abcde"></div> /////////////###################see div here to append to, did not work 





    <!--<ul data-role="listview" data-style="inset" class=" listView km-widget km-listview km-list km-listinset"> 
      <li><label class="km-listview-label question">OID</label></li> 
      <li><label class="km-listview-label" style="height: 2.5em; width:100%;"> 
       <label id="oid" style="left:0; width:100%;"></label> 
      </label></li> 
     </ul> 
     <ul data-role="listview" data-style="inset" class="listView km-widget km-listview km-list km-listinset"> 
      <li><label class="km-listview-label question">NHI</label></li> 
      <li><label class="km-listview-label" style="height: 2.5em; width:100%;"> 
       <label id="nhi" style="left:0; width:100%;"></label> 
      </label></li> 
     </ul> 
    <ul data-role="listview" data-style="inset" class="listView km-widget km-listview km-list km-listinset"> 
      <li><label class="km-listview-label question">Location</label></li> 
      <li><label class="km-listview-label" style="height: 2.5em; width:100%;"> 
       <label id="dwelling" style="left:0; width:100%;"></label> 
      </label></li> 
     </ul> 
    <ul data-role="listview" data-style="inset" class="listView km-widget km-listview km-list km-listinset"> 
      <li><label class="km-listview-label question">Observations</label></li> 
      <li><label class="km-listview-label" style="height: 2.5em; width:100%;"> 
       <select style="left:0; width:100%;" id="allObservationsDropDown" onchange="if (typeof(this.selectedIndex) != undefined) {navigateToObservation(); this.blur();}" onfocus="this.selectedIndex = -1;"></select> 
      </label></li> 
     </ul>--> 




    <div class="km-listview-wrapper"><ul id="" data-role="listview" data-style="inset" class="listView km-widget km-listview km-list km-listinset"> 
      <li><label class="km-listview-label question">Perform Observation</label></li> 
      <li><label class="km-listview-label" style="height: 2.5em; width:100%;"> 
       <select style="left:0; width:100%;" id="allObservationsDropDown" onchange="if (typeof(this.selectedIndex) != undefined) {navigateToObservation(true); this.blur();}" onfocus="this.selectedIndex = -1;"><option value="chooseO" selected="true" disabled="true">Choose observation...</option><option value="GLASGOW">Glasgow Coma Scale</option><option value="MO">Mobile Observation</option><option value="O">Observation</option></select> 
      </label></li> 
     </ul></div> 









    <!--<ul class="listView" data-role="listview" data-style="inset"> 
     <li> 
      <label class="question">Observations 
       <br/> 
      </label> 
      <select id="allObservationsDropDown" onchange="if (typeof(this.selectedIndex) != undefined) {navigateToObservation(true); this.blur();}" onfocus="this.selectedIndex = -1;"></select> 
     </li> 
    </ul>--> 


</div>

我已經使用在PAS這項技術和它的工作。我的html頁面有問題嗎？任何幫助讚賞。

來源

2014-08-27 BeniaminoBaggins

代碼是否在文檔就緒事件之後執行？ – OJay 2014-08-27 23:06:55

@OJay這是問題，謝謝。如果你喜歡，你可以寫作而不是回答，我會標記爲正確的。乾杯。 – BeniaminoBaggins 2014-08-27 23:10:11

爲了在HTML頁面上選擇一個元素，當代碼運行時，該元素必須存在於頁面上，並且由於瀏覽器從上到下讀取頁面，如果它到達head中嘗試嘗試的腳本在它讀取/呈現body之前訪問body中的元素，它將不會找到它）。有兩種主要的方法可以做到這一點，或者把你的JavaScript放在頁面底部，或者確保你的代碼被包裝在準備好文檔的jQuery包裝器中。

這可以通過兩種方式在jQuery的

$(document).ready(function(){ 
    //Put code here to run after the DOM is loaded 
});

或

$(function(){ 
    //Put code here to run after the DOM is loaded 
});

現在，作爲一個額外的點，如果您儘量選擇頁面上的元素，這是不在那裏，你不會得到一個錯誤，並且返回值仍然是一些東西（它是jQuery包裝器對象）。所以在你的情況下，爲什麼你看到你在控制檯上看到的是因爲你輸出了jQuery對象（即使沒有發現任何東西，它的屬性爲context和selector）。有一個簡單的測試，看看jQuery的已經有一個/任何元素/秒，這是檢查length

即

var div = $('#abcde'); 
console.log(div); //This will log the jQuery wrapper object, 
        //doesn't mean that it has actually found element #abcde

檢查長度會給你jQuery的有多少元素找到符合您說選擇器

var div = $('#abcde'); 
console.log(div.length); //If this logs 0, you haven't got the element

來源

2014-08-27 23:20:09 OJay

HTMLElement.append不會追加 - JavaScript

回答

相關問題