Markus Z.: Problem mit jQuery beim dynamischen Eingriff in den DOM-Baum

Beitrag lesen

Hier mal eine Kurzform des Quellcodes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.mobile-1.3.2.js" type="text/javascript" ></script>
<script src="jquery-3.2.1.js" type="text/javascript" ></script>
<style>
<!--
.smallDevice { width : 400px;
               height : 280px;
               padding : 10px;
               margin: 10px; }
//-->
</style>

<script type="text/JavaScript">
<!--
function OnCreateNewDevice() {
var formatSettings = "<div class='ui-body ui-body-a ui-corner-all smallDevice'>" +
                     "<input type='button' value='Neuer Button'></div>";
var newDevice = document.createElement("DIV");
document.getElementById("deviceFrame").appendChild(newDevice);
newDevice.innerHTML = formatSettings;
}
//-->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div data-role="page" id="page" class="type-interior" data-theme="a" name="mainPage">
<input type='button' value='Create new device' onClick='OnCreateNewDevice();'>
<div id="deviceFrame"></div>
</div>
</body>
</html>