私は非常に単純なテキスト エディターのようなものをしようとしています。ユーザーが 7 種類の HTML 要素を挿入し、それらを使用してカスタム フォームを作成するための機能を提供する必要があります。物事がどのように機能するかを試すために、これを作成しました：
<script type="text/javascript">
function MinMax() {
document.getElementById("EditorArea").innerHTML = "<table border= 1px><tr><td>Element</td><td><input type='textbox'/></td></tr><tr><td>Marked as</td><td><input type='textbox'/></td><tr><td>Min</td><td><input type='textbox'/></td><tr><td>Max</td><td><input type='textbox'/></td><tr><td>Преди ремонт</td><td><input type='textbox'/></td><tr><td>След ремонт</td><td><input type='textbox'/></td><tr><td>Time before</td><td><input type='textbox'/></td><tr><td>Time after</td><td><input type='textbox'/></td></table>";
//var elem = document.createElement("<table><tr><th>Firstname</th><th>Lastname</th></tr><tr><td>Peter</td><td>Griffin</td></table>");
};
function ShowDate() {
document.getElementById("EditorArea").innerHTML = "<p class='dateTime' style='width:120px; border: 2px solid black'>DateTime</p>";
}
</script>
</head>
<body>
<button type="button" onclick="MinMax()">MinMax</button>
<button type="button" onclick="ShowDate()">DateTime</button>
<div id="EditorArea" style = "width:800px; height:600px; border:2px solid black;">
insertBefore私が抱えている問題は、またはを使用してテーブル構造全体を追加する方法が見つからないことinsertAfterです。ただしinnerHTML、別の要素を追加すると、前の要素が削除されます。ユーザーがさまざまな要素を配置して、希望どおりに見えるようにする方法はまだわかりませんが、今のところ、この動作なしでいくつかの要素を追加する方法が必要です-古い要素は新しい要素によって削除されます.