追加前的字符串的HTML元素

Question

我能夠通過以下的解決方案張貼在這裏編輯一個以GeoJSON屬性單張彈出創建輸入字段：

Edit feature attributes in leaflet

我想加一個常數字符串在彈出窗口中，以便彈出窗口讀取類似於'在此編輯數據：[用可編輯數據輸入]'

當我嘗試執行此操作時，輸入框失敗並返回字符串'[object HTMLInputElement]'代替。

如何避免這種情況？

var input = L.DomUtil.create('input', 'my-input'); 

input.value = feature.properties.datatoedit; 
L.DomEvent.addListener(input, 'change', function() { 
    feature.properties.datatoedit = input.value; 
}); 

var popupcontent = "<b>Edit Data Here: </b><br>" + input; 

layer.bindPopup(popupcontent); 

Answer 1

歡迎來到SO！

你必須認識到，"<b>Edit Data Here: </b><br>" + input試圖連接一個串與HTML元素。

當這樣做時，JS引擎會嘗試將input轉換爲一個字符串，該字符串會呈現您的'[object HTMLInputElement]'字符串。

相反，您應該將"<b>Edit Data Here: </b><br>"部分轉換爲HTML元素（也可以是片段），以便您可以將它插入input並將它們作爲HTML節點提供給彈出窗口內容。

// Create an HTML Element container for both your string and input. 
var popupContent = document.createElement('div'); 

// Fill it first with your raw HTML code. 
// It will automatically be parsed and converted as HTML nodes. 
popupContent.innerHTML = "<b>Edit Data Here: </b><br>"; 

// Now you can append your `input` which is already an HTML Element. 
popupContent.appendChild(input); 

layer.bindPopup(popupContent); 

演示：http://plnkr.co/edit/W11Z95Y9dQZThBu2dKQz?p=preview