Append element as sibling after element?

Question

How do I add a text after an HTML element using pure Javascript? There is appendChild but this adds it within the element. I would instead like to add it as a sibling after the element like this:

<img id="myimg" src="..." />

<script>
  var myimg = document.getElementById('myimg');
  myimg.appendAFTER('This is my caption.'); //pseudo-code and doesn't really work
</script>

I would like to end up with this:

<img id="myimg" src="..." />
This is my caption.

What is the Javascript equivalend of after() from jQuery?

check my updated answer – Sunny Sharma Jan 29 '14 at 05:23 — Sunny Sharma, Jan 29 '14 at 05:23

score 87 · Accepted Answer · edited Apr 15 '20 at 14:28

87

Check out Node.insertBefore() and Node.nextSibling (fiddle):

var myimg = document.getElementById('myimg');
var text = document.createTextNode("This is my caption.");
myimg.parentNode.insertBefore(text, myimg.nextSibling)

or Element.insertAdjacentHTML() (fiddle):

var myimg = document.getElementById('myimg');
myimg.insertAdjacentHTML("afterend", "This is my caption.");

edited Apr 15 '20 at 14:28

elliottregan

1,175
1
12
31

answered Jan 29 '14 at 04:53

canon

38,844
9
71
94

Is either of these "better practice" or more efficient? Thanks! – Marek OCLC Apr 08 '22 at 19:06

score 7 · Answer 2 · answered Jan 29 '14 at 04:56

7

Please use the following code:

<img id="myimg" src="..." />

<script>
  var myimg = document.getElementById('myimg');
  var txt=document.createElement("span");
  txt.innerHTML="Whatever text you want to write . . .";
  if(myimg.nextSibling){
    myimg.parentNode.insertBefore(txt,myimg.nextSibling);
  }else{
    myimg.parentNode.appendChild(txt);
  }
</script>

answered Jan 29 '14 at 04:56

kcak11

794
6
17

5

You don't need to check for `.nextSibling`. `insertBefore()` will happily append the new node if the reference node is `null`. – canon Jan 29 '14 at 06:00

Append element as sibling after element?

2 Answers2