javascript - Create new <li> element with textarea onclick of button -
html:
<li><textarea></textarea></li><br><a id="newpoints"></a> <input type="button" value="+ add new point" onclick="newpoint();">
css (if need it):
textarea { font-family: georgia, 'times new roman', times, serif; vertical-align: text-top; width: 300px; height: 60px; resize: vertical; padding: 10px; }
and javascript:
function newpoint() { var = document.getelementbyid("newpoints"); a.innerhtml += '<li><textarea placeholder="to delete point, select textbox , press "delete" button on keyboard." onkeydown="if(event.keycode == 46) { this.parentnode.nextsibling.parentnode.removechild(this.parentnode.nextsibling); this.parentnode.parentnode.removechild(this.parentnode); }"></textarea></li><br>'; }
to better visualise, here's fiddle.
so basically, code above, i'm trying make such when user clicks on button, new <li>
(that comes <br>
after it) contains <textarea>
created. new <li>
, <textarea>
, following <br>
deleted when user presses delete button on keyboard while selecting textarea.
the problem that, when user creates new <li>
, types text textarea, create <li>
, text textarea of previous <li>
disappear.
how can fix this?
use createelement
, appendchild
add elements. think happening when append innerhtml, overwriting in newpoints
.
function newpoint() { var = document.getelementbyid("newpoints"); var l = document.createelement("li"); l.innerhtml = '<textarea placeholder="to delete point, select textbox , press "delete" button on 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); }
Comments
Post a Comment