why dont work insertAfter function in javascript

Question

 but insertbefore work

var a=document.querySelector("#div");

var y=document.createElement('p');
y.innerText='yazilarucun';


var c=document.querySelector(".p");
a.insertAfter(y,c);

<body>
  <div id='div'>yazi
  <p class='p'>p etiketi</p>
  </div> 
</body>

Take a look: [How to insert an element after another element in JavaScript without using a library?](https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib) — alexP, May 26 '21 at 09:16

score 1 · Answer 1 · answered May 26 '21 at 09:23

The node.insertAfter() is not an inbuilt javascript method, instead we created a user-defined function.

<!DOCTYPE html>
<html>
<body>
<p id="point">Start</p>

<script>
var parentNode = document.getElementsByTagName("body")[0];
var refNode = document.getElementById("point");

function insertAfter(newNode, refNode){
 refNode.parentNode.insertBefore(newNode, refNode.nextSibling);
}

var newNode = document.createElement("p"); 
var textnode = document.createTextNode("End");
newNode.appendChild(textnode);
insertAfter(newNode, refNode);
</script>
</body>
</html>

check : https://www.wikimass.com/js/node-insertafter

score 0 · Answer 2 · answered May 26 '21 at 09:22

Your Problem Can be fixed pretty easily. You can fix this by adding the node before the node that is after the the node

function insertAfter(newNode, existingNode) {
  existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}
//Create Element
var new_para = document.createElement('p');
new_para.innerText = 'yazilarucun';
//Add the element
var old_para = document.querySelector(".p");
insertAfter(new_para, old_para)

<body>
  <div id='div'>yazi
    <p class='p'>p etiketi</p>
  </div>
</body>

Magnus Fohlström · Answer 3 · 2021-12-31T22:22:36.893

There is at least 3 ways to do it.

let targetNode = document.querySelector('#wrapper'),
    placeNode = document.querySelector('#footer');

targetNode.after(placeNode);
targetNode.insertAdjacentElement('afterend', placeNode);
targetNode.parentNode.insertBefore(placeNode, targetNode.nextSibling);

The first of these 3, is the newest and simplest. Has been supported since Chrome 54+, Firefox 49+, Edge 17+. No IE support...

Last one is best support, oldest and most complicated one...

Middle one is somewhere in the middle... Is still too hard... Not intuitive enough...

why dont work insertAfter function in javascript

3 Answers3