Guys, I'm having issue with DOM scripting and need some help. Here's what i have:

`

...

...

`

Writing the insertAfter function

Although the DOM hasn’t provided a method called insertAfter, it does have all the tools you need toinsert a node after another node. You can use existing DOM methods and properties to create a functioncalled insertAfter:

The function takes two arguments: the new element and the target element thenew element should be inserted after. These are passed as the variablesnewElement and targetElement:

function insertAfter(newElement,targetElement)

Get the parentNode property of the target element and assign it to the variableparent:

var parent = targetElement.parentNode

Find out if the target element happens to be the last child of parent. Comparethe lastChild property of parent with the target element:

if (parent.lastChild == targetElement)

If this is true, then append the new element to parent using appendChild. Thenew element will be inserted directly after the target element:

parent.appendChild(newElement)

Otherwise, the new element needs to be inserted between the target element and the next child of parent. The next node after the target element is the nextSibling property of the target element. Use the insertBefore method to place the new element before the target element’s next sibling:

parent.insertBefore(newElement.targetElement.nextSibling)

Paul_Wilkins
—
2011-05-18T04:29:20Z —
#4

mnaseersj said:

Writing the insertAfter function

There is no need to write an insertAfter function.

Why? The nextSibling property returns null if there is no next sibling.When the insertBefore has null as the referenc element, it automatically appends instead.

For confirmation, this is what the insertBefore documentation page has to say:

Is not the second statement in red, different from the first because if targetElement.nextSibling has another sibling and therefore returns something other than null, it's not going to append !

thanking in advance.

.

Paul_Wilkins
—
2011-05-18T21:45:31Z —
#7

mnaseersj said:

Is not the second statement in red, different from the first because if targetElement.nextSibling has another sibling and therefore returns something other than null, it's not going to append !

There are two possible situations that can occur here.

the target element has a next sibling

the target element doesn't have a next sibling

Case 1 - when the target element has a next sibling, the parent element has the new element inserted before the targets next sibling. That is just after the target element, which is what we expect when inserting after the target element.

Case 2 - when the target element doesn't have a next sibling, the parent element instead receives null as the reference. In this situation the parent element inserts the new element to the end of its list of child nodes. Before the last child node was our target element, and afterwards the last child node is that new element. Once again, the new element is inserted after the target element.

So in both cases, the new element is inserted after the target element.

mnaseersj
—
2011-05-18T22:31:08Z —
#8

paul_wilkins said:

There are two possible situations that can occur here.

1. the target element has a next sibling2. the target element doesn't have a next sibling

Case 1 - when the target element has a next sibling, the parent element has the new element inserted before the targets next sibling. That is just after the target element, which is what we expect when inserting after the target element.

Case 2 - when the target element doesn't have a next sibling, the parent element instead receives null as the reference. In this situation the parent element inserts the new element to the end of its list of child nodes. Before the last child node was our target element, and afterwards the last child node is that new element. Once again, the new element is inserted after the target element.

So in both cases, the new element is inserted after the target element.

Hi Paul - I just realized where I made the mistake, for some reason I was still in the 'targetElement' mode instead of 'targetElement.nextSibling', but thank you very much for taking the time out to point that out to me