Question

HTML：

<li><textarea></textarea></li><br><a id="newPoints"></a>
<input type="button" value="+ Add new point" onclick="newPoint();">

CSS（如果需要）：

textarea {
    font-family: Georgia, 'Times New Roman', Times, serif;
    vertical-align: text-top;
    width: 300px;
    height: 60px;
    resize: vertical;
    padding: 10px;
}

和Javascript：

function newPoint() {
    var a = document.getElementById("newPoints");
    a.innerHTML += '<li><textarea placeholder="To delete this point, select this textbox and press the &quot;Delete&quot; button on your keyboard." onkeydown="if(event.keyCode == 46) { this.parentNode.nextSibling.parentNode.removeChild(this.parentNode.nextSibling); this.parentNode.parentNode.removeChild(this.parentNode); }"></textarea></li><br>';
}

为了更好地可视化，这里是fiddle。

所以基本上，使用上面的代码，我试图让用户点击按钮时，包含一个新的<li>（后面带有<br>）将创建<textarea>。当用户在选择textarea时按下键盘上的删除按钮时，将删除此新<li>，<textarea>和以下<br>。

问题在于，当用户创建新的<li>并在其文本区域中键入一些文本，然后创建另一个<li>时，前一个<li>的文本区域中的文本将会消失。

我该如何解决这个问题？

Answer 1

使用CreateElement和appendChild添加元素。我认为发生的事情是当你附加到innerHTML时，它会覆盖newPoints中的所有内容。

function newPoint() {
    var a = document.getElementById("newPoints");
    var l = document.createElement("li");
    l.innerHTML = '<textarea placeholder="To delete this point, select this textbox and press the &quot;Delete&quot; button on your keyboard." onkeydown="if(event.keyCode == 46) { this.parentNode.nextSibling.parentNode.removeChild(this.parentNode.nextSibling); this.parentNode.parentNode.removeChild(this.parentNode); }"></textarea>';
    var b = document.createElement("br");
    a.appendChild(l);
    a.appendChild(b);
}

http://jsfiddle.net/MzENe/1/

Answer 2

这可能会有所帮助：

function newPoint() {
    var a = document.getElementById("newPoints");
    var newcontent = document.createElement('li');
    newcontent.innerHTML = "<textarea placeholder='To delete this point, select this textbox and press the &quot;Delete&quot; button on your keyboard.' onkeydown=\"if(event.keyCode == 46) {  this.parentNode.parentNode.removeChild(this.parentNode);}\"></textarea>";
    a.appendChild(newcontent);
}

javascript - 使用按钮</li>的textarea onclick创建新的<li>元素

2 个答案: