javascript - 在 HTML 元素之前附加字符串

Question

我可以按照此处发布的解决方案在 Leaflet 弹出窗口中创建一个输入字段来编辑 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