Question

＆＃13;

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);
}

＆＃13;

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

＆＃13;

上面的代码片段在单击按钮时成功地向ul添加了一个输入字段。但是，当我向输入字段添加属性时，提交按钮不再起作用。

＆＃13;

    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);
    }

＆＃13;

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

＆＃13;

感谢。

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

innerHTML（或其他方法）：将li附加到ul，其中<input />包含属性

1 个答案: