javascript - 创建一个将页面初始化为特定状态的按钮

Question

最初我的页面有几个按钮和一个表格。在我可以从表中添加/删除行之后。我想创建另一个具有页面初始状态的按钮，即按钮和空表。

我的javascript:

function initialize_page() {
    localStorage.clear()
    var preambula = '<button type="button" id="create_row">Create row</button> \
                    <button type="button" id="remove_row">Delete row</button><br> \
                    <button type="button" id="initialize">New Table</button><br> \
                    <table id="main_table"> \
                      <tr> \
                        <td>#</td> \
                        <td>Name</td> \
                        <td>Pref.1</td> \
                        <td>Pref.2</td> \
                        <td>Pref.3</td> \
                      </tr> \
                    </table>'
    var div = document.createElement('div');
    div.innerHTML = preambula;
}
initialize_page();

document.getElementById('initialize').onclick = initialize_page;

但是，它说:无法将属性“onclick”设置为 null。

我的任务很简单:我有初始 html，然后我可以添加/删除行，当我按下初始化按钮时我想返回初始 html。最简单的方法是什么？ (不想使用 jQuery)

Answer 1

您需要一些东西来附加您创建的 div 元素。

var div = document.createElement('div');
div.innerHTML = preambula;
document.getElementById('append-table').innerHTML = '';
document.getElementById('append-table').appendChild(div);

我在这里为你创建了一个 fiddle :http://jsfiddle.net/6x7jd5od/