innerHTML (или другой способ): Append литий до ул, с <input/> включая атрибуты

Question

document.getElementById('addplace').addEventListener('click', function() { 
 
    addplace(); 
 
    }); 
 

 
function addplace() { 
 
    var node = document.createElement("li"); // Create a <li> node 
 
    node.innerHTML = "<input/>"    
 
    document.getElementById("waypoints").appendChild(node); 
 
}

<ul id="waypoints"></ul> 
 
<input type="submit" id="addplace" />   
 
    

, приведенный выше фрагмент кода успешно добавляет поле ввода к ул, когда кнопка нажата. Однако, когда я добавляю атрибуты в поле ввода, кнопка отправки больше не работает.

Спасибо.

Answer 1

Вам необходимо либо сбежать ("\"") двойные кавычки внутри строки, либо использовать одинарные кавычки ("'") вместо двойных кавычек, чтобы исправить вашу проблему.

function addplace() { 
    var node = document.createElement("li"); // Create a <li> node 
    node.innerHTML = "<input class='field' placeholder='Where to begin?' onFocus='geolocate()' type='text' />"    
    document.getElementById("waypoints").appendChild(node); 
} 

Решение вытекания двойные кавычки,

node.innerHTML = "<input class=\"field\" placeholder=\"Where to begin?\" onFocus=\"geolocate()\" type=\"text\" />"