Example code:
<!DOCTYPE html PUBLIC "//
W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.
dtd">
<html>
<head>
<title>Javascript Test</title>
<style type="text/css">
#parent {border: 1px solid black; padding: 5px;}
#child {border: 1px solid black; padding: 5px;}
#grandchild {border: 1px solid black; padding: 5px;}
#greatgrandchild {border: 1px solid black; padding: 5px;}
</style>
</head>
<body>
<script type="text/javascript">
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
var Insertion = new Object();
Insertion.Child = Class.create();
Insertion.Child.prototype = {
initialize: function(element) {
this.element = document.getElementById(element);
this.contentToAdd = '<div id="greatgrandchild"> GREAT GRANDCHILD </div>';
if (this.element.insertAdjacentHTML) {
this.element.insertAdjacentHTML('beforeEnd', this.contentToAdd);
} else {
this.range = this.element.ownerDocument.createRange();
this.range.selectNodeContents(this.element);
this.insertContent();
}
},
insertContent: function() {
this.fragment = this.range.createContextualFragment(this.contentToAdd);
this.element.appendChild(this.fragment);
}
}
</script>
<div id='parent'>
PARENT
<div id='child'>
CHILD
<div id='grandchild'>
GRANDCHILD
</div>
</div>
</div>
<br />
<input type="button" value="Insert Great Grand Child" onclick="new Insertion.Child('grandchild');" />
</body>
</html>
1) On loading this page the javascript will:
a) Create a Class Object.
b) Create an Insertion Object.
c) Create both the Class Object and an Insertion Object.
d) Creates the Class and Insertion Object and also creates the Insertion Child prototype.
e) Nothing will happen– the javascript code has to be called before any action.
2) Put the following processes in order of occurance that happen when the user clicks the button in Mozilla based
browser.
a) Creates the greatgrandchild div
b) Inherits the Insertion Child prototype
c) Inserts the greatgrandchild div
d) Gets the element DOM reference
e) Calls the InsertContent function
f) Calls the Initialize function
g) Sets the Dom Range Object
3) What MSIE specific function is used in the code:
4) If I amend the initialize function to read (changes highlighted):
initialize: function(element) {
this.element = document.getElementById(element);
this.contentToAdd = '<div id="greatgrandchild"> GREAT GRANDCHILD </div>';
if (this.element.insertAdjacentHTML) {
this.element.insertAdjacentHTML('AfterEnd', this.contentToAdd);
} else {
this.range = this.element.ownerDocument.createRange();
this.range.setStartAfter(this.element);
this.insertContent();
}
},
4.1) In relation to the grandchild div where will the greatgrandchild div be nested after clicking the button in
Internet Explorer:
a) Before (child of the child div before grandchild div)
b) After (child of the child div but after the grandchild div)
c) Child (child of the grandchild div)
d) The script will error.
4.2) In relation to the grandchild div where will the greatgrandchild div be nested after clicking the button in a
Mozilla browser:
a) Before (child of the child div before grandchild div)
b) After (child of the child div but after the grandchild div)
c) Child (child of the grandchild div)
d) The script will error.
powodzenia i jak ktos mi to rozwiaze w miare szybko to moge sie odwdzieczyc malym przelewem na konto