Inserting HTML elements in div tag via JavaScript without removing each other

Question

I am trying to something like very simple text editor. I need to provide functionality for the user to insert 7 different types of HTML elements and use them to create some custom form. Just to try how things work I made this:

<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;">

The problem I have is that I can't find a way to add a whole table structure using insertBefore or insertAfter. However innerHTML does it but when I add another element it removes the previous. Even though I still don't know how I will let the user arrange the different elements to make it look like he wants, for now I need a way to add several elements without this behavior - the old element to be removed by the new one.

Have you considered using JQuery or something alike?

heikkim
– heikkim

2013-04-16 11:46:51 +00:00
Commented Apr 16, 2013 at 11:46 — heikkim
– heikkim, Commented Apr 16, 2013 at 11:46
Dunno. Anyways I need some simple solution if possible.

Leron
– Leron

2013-04-16 11:49:08 +00:00
Commented Apr 16, 2013 at 11:49 — Leron
– Leron, Commented Apr 16, 2013 at 11:49

Brandon J. Boone · Accepted Answer · 2013-04-16 12:01:01Z

3

Use insertAdjacentHTML

enter image description here

`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>");
}

edited Apr 16, 2013 at 12:01

answered Apr 16, 2013 at 11:54

Brandon J. Boone

16.5k4 gold badges78 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Davor Mlinaric · Accepted Answer · 2013-04-16 11:50:05Z

2

like this, but i recomend to use jquery.

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

jquery

$(div).append(data);

answered Apr 16, 2013 at 11:50

Davor Mlinaric

2,0271 gold badge20 silver badges26 bronze badges

1 Comment

iCode Over a year ago

But it will add a tr, td outside of table

johnchen902 · Accepted Answer · 2013-04-16 12:23:39Z

2

Use += instead of =

document.getElementById("EditorArea").innerHTML += "<p class='dateTime' style='width:120px; border: 2px solid black'>DateTimelt</p>";

edited Apr 16, 2013 at 12:23

answered Apr 16, 2013 at 11:51

johnchen902

9,6191 gold badge29 silver badges70 bronze badges

Collectives™ on Stack Overflow

Inserting HTML elements in div tag via JavaScript without removing each other

3 Answers 3

Use insertAdjacentHTML

`Live Demo`

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Use insertAdjacentHTML

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related