2017-10-09 64 views
-5

嗨我想添加特定的HTML行到特定的地方與JavaScript代碼。使用javascript添加html

<ion-header> 
    <ion-navbar> 
    <ion-title>Map</ion-title> 
    </ion-navbar> 
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script> 
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet' /> 
</ion-header> 

<ion-content padding> 

     <!--<div id="map" style="width: 100%; height: 100%"></div>--> <!--Add this line to here with js--> 

    </ion-content> 

我試過document.getelementbyid.inner/outerhtmldocument.write但是搞不清楚。

+2

帖子你嘗試過什麼,即使它沒有工作。 –

+3

javascript是區分大小寫的,所以很可能'document.getElementById('elementid')。innerHTML' – Icepickle

+1

如果你真的使用了'document.getelementbyid',你會收到控制檯錯誤。檢查[** getElementById **](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)的文檔以及類似的文章,併發布不適用於[* *最小,完整和可驗證的示例**](https://stackoverflow.com/help/mcve) – Nope

回答

1

我沒有看到任何id或類。因此,而不是嘗試使用標籤名稱

document.getElementsByTagName("ion-content")[0].innerHTML = '<div id="map" style="width: 100%; height: 100%"></div>'; 
+0

@rektandlove我在我的系統中試過我的代碼,它工作得很完美。 你可以讓我知道你在執行我的代碼時得到了什麼錯誤? 檢查我編輯的代碼 –

+0

謝謝你的代碼正在工作我猜,但也許即時通訊嘗試以錯誤的方式解決我的問題。你檢查此主題:https://forum.ionicframework.com/t/leaflet-switching-tabs- map-container-is-already-initialized/108124即時嘗試刪除地圖div當我離開地圖水龍頭並初始化它時,我加載我的地​​圖選項卡again.but似乎不工作。 – rektandlove

+0

如果我的代碼工作,這意味着它是你的問題的解決方案,爲什麼給--ve點againts它。 無論如何,在您的代碼「」中,如果您嚴格要使用 「document.getElementbyid」 –

0

試試這個:

document.querySelector("ion-content").innerHTML = "<a style='color: red'> ASD</a>" ;
<ion-header> 
 
    <ion-navbar> 
 
    <ion-title>Map</ion-title> 
 
    </ion-navbar> 
 
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script> 
 
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet' /> 
 
</ion-header> 
 

 
<ion-content padding> 
 

 
     <!--<div id="map" style="width: 100%; height: 100%"></div>--> <!--Add this line to here with js--> 
 

 
    </ion-content>