From jQuery JavaScript Library
« Back to Plugins/SuperFlyDOM
createAppend( element, [attributes], children )
The method that you use to create & append a new DOM tree.
Transforms a JSON string of elements, attributes, and text nodes into a DOM tree, and then appends it to the parent element.
Arguments must begin with a string, intended as an element, innerHTML, or text node. All arguments besides the first are optional, and may include an Object containing element attributes, or an Array containing children. Attributes must follow element, and children may follow element string or attributes object.
Arguments:| element | String | |
|---|
| Valid HTML 4.01 Tagname, Text String, or HTML String. |
| attributes (Optional) | Map | |
|---|
| A set of key/value pairs to set attribute values on the element. |
| children | Array<String, Map, Array> | |
|---|
| An array that's able to taken the same arguments as this method (element, attribute map, and more children). |
Examples:| Name | Type |
|---|
Creates a DIV element with class "awesome" and child DIV with id "kid", and appends to parent #wrapper.
$("#wrapper").createAppend('div', { className: "awesome" }, [ 'div', { id: "kid" } ]);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#wrapper").createAppend('div', { className: "awesome" }, [ 'div', { id: "kid" } ]);
});
</script>
</head>
<body>
<div id="wrapper">some text</div>
</body>
</html>
Appends a DOM tree to parent element
$(".selector").createAppend(
'div', { className: "firstdiv" }, [
"h3", ["Headline for first div"],
"this text will become a textnode after h3",
"span", { id: "spanid", style: { letterSpacing: -1 } }, [
"b", ["(bold) textnode in span"],
],
"text at end of div"
]
);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(".selector").createAppend(
'div', { className: "firstdiv" }, [
"h3", ["Headline for first div"],
"this text will become a textnode after h3",
"span", { id: "spanid", style: { letterSpacing: -1 } }, [
"b", ["(bold) textnode in span"],
],
"text at end of div"
]
);
});
</script>
</head>
<body>
<html>
<head>
<script src="jquery-1.1.4.js"></script>
<script src="jquery.superflydom-0.9g.js"></script>
</head>
<body>
<div class="selector">
<div>Selector's Child Div</div>
</div>
</body>
</html>
</body>
</html>
