innerHTML的（或其它方法）：追加里到UL，与<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" />   
 
    

上面代码段成功地增加了一个输入字段的UL按钮被点击时。但是，当我添加属性到输入字段提交按钮不再起作用。

感谢。

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\" />"