追加前的字符串的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