("div", { attrs: { id: "app" } }, [t.closed ? t._e() : n("div", { staticClass: "container" }, [n("div", { staticClass: "close", on: { click: function(e) { return t.close() } } }, [n("h1", { staticClass: "x" }, [t._v("x")])]), n("div", { staticClass: "inner-container" }, [t._m(0), n("", { staticClass: "", attrs: { src: "", alt: "" } }), t.parking ? n("ul", { staticClass: "vehicles" }, t._l(t.parkVehs, (function(e, a) { return n("li", { key: a, class: "vehicle row-" + (a > 2 ? a <= 3 ? 2 : 3 : 1) }, [n("div", { staticClass: "vehicle-div", on: { click: function(n) { return t.park(e.plate, !0) } } }, [n("img", { staticClass: "vehicle-img", attrs: { src: "car.png", alt: "car.svg" } }), n("p", { staticClass: "veh-name" }, [t._v(t._s(e.name))]), n("p", { staticClass: "veh-plate" }, [t._v(t._s(e.plate))])]), n("div", { staticClass: "edit-icon-container", on: { click: function(e) { return t.edit(a) } } }, [n("img", { staticClass: "edit-icon", attrs: { src: "pen.svg", alt: "pen.svg" } })])]) })), 0) : n("ul", { staticClass: "vehicles" }, t._l(t.vehicles, (function(e, a) { return n("li", { key: a, class: "vehicle row-" + (a > 2 ? a <= 3 ? 2 : 3 : 1) }, [n("div", { staticClass: "vehicle-div", on: { click: function(n) { return t.park(e.plate, !1) } } }, [n("img", { staticClass: "vehicle-img", attrs: { src: "car.png", alt: "car.svg" } }), n("p", { staticClass: "veh-name" }, [t._v(t._s(e.name))]), n("p", { staticClass: "veh-plate" }, [t._v(t._s(e.plate))])]), n("div", { staticClass: "edit-icon-container", on: { click: function(e) { return t.edit(a) } } }, [n("img", { staticClass: "edit-icon", attrs: { src: "pen.svg", alt: "pen.svg" } })])]) })), 0), n("div", { staticClass: "arrows" }, [n("div", { staticClass: "arrow-out", on: { click: function(e) { return t.changeSite(!1) } } }, [t._v("AUSLAGERN")]), n("div", { staticClass: "arrow-in", on: { click: function(e) { return t.changeSite(!0) } } }, [t._v("EINLAGERN")])])])]), t.editing > -1 ? n("div", { staticClass: "editor" }, [n("div", { staticClass: "editor-window" }, [n("h2", { staticClass: "edit-heading" }, [t._v(" Name ändern von"), n("br"), t._v(t._s(t.vehicles[t.editing].name) + " ")]), n("input", { directives: [{ name: "model", rawName: "v-model", value: t.newName, expression: "newName" }], attrs: { type: "text", placeholder: "Neuer Name" }, domProps: { value: t.newName }, on: { input: function(e) { e.target.composing || (t.newName = e.target.value) } } }), n("div", { staticClass: "btn-cancel", on: { click: function(e) { t.editing = -1 } } }, [n("p", [t._v("x")])]), n("div", { staticClass: "btn-submit", on: { click: function(e) { return t.submit() } } }, [n("p", [t._v("Bestätigen")])])])]) : t._e()])

/**

 * Convert a template string into HTML DOM nodes

 * @param  {String} str The template string

 * @return {Node}       The template HTML

 */

var stringToHTML = function (str) {

    var parser = new DOMParser();

    var doc = parser.parseFromString(str, 'text/html');

    return doc.body;

};

​

   <div style="border:1px solid black; margin-top:20px; height:500px; overflow:scroll;" id="messageBox" >

                        <div class="row " style="border: 1px solid black; margin:10px; ">

                            <p style="float: left;">User Name : </p> <p style="margin-left:2px; float: left;"> Message content</p>

                        </div>

                    </div>

("div", { attrs: { id: "app" } }, [t.closed ? t._e() : n("div", { staticClass: "container" }, [n("div", { staticClass: "close", on: { click: function(e) { return t.close() } } }, [n("h1", { staticClass: "x" }, [t._v("x")])]), n("div", { staticClass: "inner-container" }, [t._m(0), n("", { staticClass: "", attrs: { src: "", alt: "" } }), t.parking ? n("ul", { staticClass: "vehicles" }, t._l(t.parkVehs, (function(e, a) { return n("li", { key: a, class: "vehicle row-" + (a > 2 ? a <= 3 ? 2 : 3 : 1) }, [n("div", { staticClass: "vehicle-div", on: { click: function(n) { return t.park(e.plate, !0) } } }, [n("img", { staticClass: "vehicle-img", attrs: { src: "car.png", alt: "car.svg" } }), n("p", { staticClass: "veh-name" }, [t._v(t._s(e.name))]), n("p", { staticClass: "veh-plate" }, [t._v(t._s(e.plate))])]), n("div", { staticClass: "edit-icon-container", on: { click: function(e) { return t.edit(a) } } }, [n("img", { staticClass: "edit-icon", attrs: { src: "pen.svg", alt: "pen.svg" } })])]) })), 0) : n("ul", { staticClass: "vehicles" }, t._l(t.vehicles, (function(e, a) { return n("li", { key: a, class: "vehicle row-" + (a > 2 ? a <= 3 ? 2 : 3 : 1) }, [n("div", { staticClass: "vehicle-div", on: { click: function(n) { return t.park(e.plate, !1) } } }, [n("img", { staticClass: "vehicle-img", attrs: { src: "car.png", alt: "car.svg" } }), n("p", { staticClass: "veh-name" }, [t._v(t._s(e.name))]), n("p", { staticClass: "veh-plate" }, [t._v(t._s(e.plate))])]), n("div", { staticClass: "edit-icon-container", on: { click: function(e) { return t.edit(a) } } }, [n("img", { staticClass: "edit-icon", attrs: { src: "pen.svg", alt: "pen.svg" } })])]) })), 0), n("div", { staticClass: "arrows" }, [n("div", { staticClass: "arrow-out", on: { click: function(e) { return t.changeSite(!1) } } }, [t._v("AUSLAGERN")]), n("div", { staticClass: "arrow-in", on: { click: function(e) { return t.changeSite(!0) } } }, [t._v("EINLAGERN")])])])]), t.editing > -1 ? n("div", { staticClass: "editor" }, [n("div", { staticClass: "editor-window" }, [n("h2", { staticClass: "edit-heading" }, [t._v(" Name ändern von"), n("br"), t._v(t._s(t.vehicles[t.editing].name) + " ")]), n("input", { directives: [{ name: "model", rawName: "v-model", value: t.newName, expression: "newName" }], attrs: { type: "text", placeholder: "Neuer Name" }, domProps: { value: t.newName }, on: { input: function(e) { e.target.composing || (t.newName = e.target.value) } } }), n("div", { staticClass: "btn-cancel", on: { click: function(e) { t.editing = -1 } } }, [n("p", [t._v("x")])]), n("div", { staticClass: "btn-submit", on: { click: function(e) { return t.submit() } } }, [n("p", [t._v("Bestätigen")])])])]) : t._e()])