innerHTML(或其他方法):使用< input/>将li附加到ul.包括属性 [英] innerHTML (or other method): append li to ul, with <input/> including attributes
本文介绍了innerHTML(或其他方法):使用< input/>将li附加到ul.包括属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
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中.但是,当我将属性添加到输入字段时,提交按钮将不再起作用.
The above snippet successfully adds an input field to the ul when the button is clicked. However when I add attributes to the input field the submit button no longer works.
document.getElementById('addplace').addEventListener('click', function() {
addplace();
});
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);
}
<ul id="waypoints"></ul>
<input type="submit" id="addplace" />
谢谢.
推荐答案
您必须对字符串内的双引号进行转义("\""
)或使用双引号("'"
)代替双引号进行修复您的问题.
You have to either escape("\""
) the double quotes inside the string or use single quotes("'"
) in the place of double quotes to fix your issue.
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);
}
通过双引号转义的解决方案,
The solution by escaping the double quotes,
node.innerHTML = "<input class=\"field\" placeholder=\"Where to begin?\" onFocus=\"geolocate()\" type=\"text\" />"
这篇关于innerHTML(或其他方法):使用< input/>将li附加到ul.包括属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文