1

我正在尝试使用非常简单的文本编辑器。我需要为用户提供插入 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;">

我遇到的问题是我找不到使用insertBeforeor添加整个表结构的方法insertAfter。但是innerHTML确实如此，但是当我添加另一个元素时，它会删除前一个元素。即使我仍然不知道如何让用户排列不同的元素以使其看起来像他想要的那样，但现在我需要一种方法来添加几个元素而不出现这种行为 - 新元素将删除旧元素.

4

3 回答 3

3

使用insertAdjacentHTML

在此处输入图像描述

Live Demo

function MinMax() {
    document.getElementById("EditorArea").insertAdjacentHTML('beforeend',"<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>");
};

function ShowDate() {
    document.getElementById("EditorArea").insertAdjacentHTML('beforeend', "<p class='dateTime' style='width:120px; border: 2px solid black'>DateTime</p>");
}
于 2013-04-16T11:54:45.647 回答
2

像这样，但我建议使用 jquery。

document.getElementById("EditorArea").innerHTML = document.getElementById("EditorArea").innerHTML + "your content";

jQuery

$(div).append(data);
于 2013-04-16T11:50:05.027 回答
2

使用 += 而不是 =

document.getElementById("EditorArea").innerHTML += "<p class='dateTime' style='width:120px; border: 2px solid black'>DateTimelt</p>";
于 2013-04-16T11:51:05.890 回答