include a tag into another one

**maileen** · Mar 31, 2007 04:17

Hi,

in my html page i have for example the following thing :

...

<div class='test' id='id_test'>
this is a simple test
</div>

Now when this html page is loaded, i would to have a js script which include this div into another one. In the way that for browser, it will look like that :

<div class='prog_added_div'>
<div class='test' id='id_test'>
this is a simple test
</div>
</div>

I do not understand how appendchild can insert such element on both side ?
I mean before the beginning of the div ==> <div class='prog_added_div'> and after the previous div ==> </div>

thx.

M.

**Pepejeria** · Mar 31, 2007 05:41

Code:

<html>
<body>
<div class='test' id='id_test'>
	this is a simple test
</div>

<script>
var test = document.getElementById("id_test");
var wrapper = document.createElement("div");
wrapper.id = "wrapper";

wrapper.appendChild(test);
document.body.appendChild(wrapper)
</script>
</body>
</html>

**mburt** · Mar 31, 2007 08:50

That works fine, but the DOM method would be to use setAttribute("id","wrapper"); instead of wrapper.id = "wrapper";
It converts an attribute to a string. FireFox doesn't like unknown attributes, but seeings "id" isn't an unknown attribute it's perfectly fine.

**Pepejeria** · Mar 31, 2007 09:14

Actually, IE has issues getting and setting attributes, so if you wanna be safe in most cases, go with the wrapper.id syntax.

**muazzez** · Mar 31, 2007 14:20

Pepejeria,
I added a message box to your code.
alert(test.parentNode.innerHTML)
But message box don't display the new div in old div.
Message box displays <div class="test" id="id_test">this is a simple test</div>

Code:

<html>
<body>
<div class="test" id="id_test">
	this is a simple test
</div>

<script type="text/javascript">
var test = document.getElementById("id_test");
var wrapper = document.createElement("div");
wrapper.id = "wrapper";

wrapper.appendChild(test);
document.body.appendChild(wrapper)
alert(test.parentNode.innerHTML); //  <div class="test" id="id_test">this is a simple test</div>

</script>
</body>
</html>

I wrote this code:

Code:

<html>
<body>
<div class="test" id="id_test">
	this is a simple test
</div>

<script type="text/javascript">
var oldDiv = document.getElementById("id_test");
var newDiv = document.createElement('div');
newDiv.id="my-new-div";
// newDiv.setAttribute("id","my-new-div");
oldDiv.appendChild(newDiv);
document.body.appendChild(oldDiv);

alert(oldDiv.innerHTML);

</script>
</body>
</html>

and added message box.
alert(oldDiv.innerHTML);
Message box displays:
this is a sample test <div id="my-new-div"><div>

User Tag List

Thread: include a tag into another one

Thread Tools

Display

include a tag into another one

Bookmarks

Bookmarks

Posting Permissions