Append element as sibling after element?

TruMan1

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?

canon

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.");

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Append element as sibling after element?

From Dev

Directive: append templateUrl as a sibling element

From Dev

Remove element after append

From Dev

Inserting an element right after the sibling in Javascript

From Dev

Append after last element by clicking on last element

From Dev

Append after last element by clicking on last element

From Dev

jQuery append() just after a element,

From Dev

Remove last element after append

From Dev

scroll to the sibling element on click

From Dev

Accessing text of sibling element

From Dev

how can I put a :after pseudo element as the container for sibling elements?

From Dev

conditionally add new xml element after specific sibling node

From Dev

Append new tag to <div> after a specific element?

From Dev

Size of element does not update after append

From Dev

How to remove an element after you do append()

From Dev

JQuery: Access Dynamic Element after append

From Dev

append element just after the one that was clicked

From Dev

Append TD('s) after td element

From Dev

How to remove an element after you do append()

From Dev

jQuery UI Append Element After The Nearest Element On Drop

From Dev

Append new element after element clicked with html template

From Dev

Jquery - append element after an element's text with multiple elements inside

From Dev

Append new element after element clicked with html template

From Dev

jQuery: append to bottom, after sibling

From Dev

How to set the content property of an `after` pseudo-element to an attribute of a sibling form element

From Dev

find an element inside an sibling of another element with jquery

From Dev

element on top of parent's sibling

From Dev

Select sibling before an element in Jquery?

From Dev

Protractor: How to get a sibling element

Related Related

  1. 1

    Append element as sibling after element?

  2. 2

    Directive: append templateUrl as a sibling element

  3. 3

    Remove element after append

  4. 4

    Inserting an element right after the sibling in Javascript

  5. 5

    Append after last element by clicking on last element

  6. 6

    Append after last element by clicking on last element

  7. 7

    jQuery append() just after a element,

  8. 8

    Remove last element after append

  9. 9

    scroll to the sibling element on click

  10. 10

    Accessing text of sibling element

  11. 11

    how can I put a :after pseudo element as the container for sibling elements?

  12. 12

    conditionally add new xml element after specific sibling node

  13. 13

    Append new tag to <div> after a specific element?

  14. 14

    Size of element does not update after append

  15. 15

    How to remove an element after you do append()

  16. 16

    JQuery: Access Dynamic Element after append

  17. 17

    append element just after the one that was clicked

  18. 18

    Append TD('s) after td element

  19. 19

    How to remove an element after you do append()

  20. 20

    jQuery UI Append Element After The Nearest Element On Drop

  21. 21

    Append new element after element clicked with html template

  22. 22

    Jquery - append element after an element's text with multiple elements inside

  23. 23

    Append new element after element clicked with html template

  24. 24

    jQuery: append to bottom, after sibling

  25. 25

    How to set the content property of an `after` pseudo-element to an attribute of a sibling form element

  26. 26

    find an element inside an sibling of another element with jquery

  27. 27

    element on top of parent's sibling

  28. 28

    Select sibling before an element in Jquery?

  29. 29

    Protractor: How to get a sibling element

HotTag

Archive