Append html(text) to element without affecting siblings?

Question

I always use appendChild to add something to other element, because if I use:

innerHTML +=  'added stringgggggggggg';

then this messes up the dynamic element,for example <form>, with filled values (it resets field values to empty).

Is there any shorter way to add smth to element, without appenChild and without using JQuery?

You don’t need an element to add text; just use a text node. I’m not aware of a way without using `appendChild` (or `insertAdjacentHTML`, etc.), though. — Sebastian Simon, Aug 14 '16 at 18:02
Simply create a helper function and reuse it, something like `appendText(element, 'added stringgggggggggg')` — Ram, Aug 14 '16 at 18:04
Does this help : - http://stackoverflow.com/a/33312039/2968762 — Abhi, Aug 14 '16 at 18:05
@rvighne Not when you have to use `document.createTextNode` for creating a textNode before using the `appendChild`. — Ram, Aug 14 '16 at 18:09
@Vohuman there are very few cases you need to be appending raw textNodes (Usually only when you need inline spans). Any other time it's best to concatenate an entire string first, then assign it to a block element last. — Soviut, Aug 14 '16 at 18:12
@Vohuman Also, you can use the [`new Text()` constructor](https://developer.mozilla.org/en-US/docs/Web/API/Text/Text) instead of `document.createTextNode()` to save some typing. — rvighne, Aug 14 '16 at 18:18
Why do you need it to be shorter? Is it too much to type? If so, configure a template in your IDE/editor. — the8472, Aug 14 '16 at 18:39

Soviut · Accepted Answer · 2016-08-14T19:00:01.827

5

You can use element.insertAdjacentHTML() to evaluate and append a raw HTML string to an element.

element.insertAdjacentHTML('beforeend', '<p>put me inside at the end</p>');

By changing the position attribute you can insert before the element, after it, inside it at the beginning, or inside it at the end.

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

Unlike innerHTML, insertAdjacentHTML() won't cause the browser won't to re-evaluate the entire DOM node you're injecting into, so form field values will be maintained.

var parentEl = document.getElementById('parent');
parentEl.insertAdjacentHTML('beforeend', '<p>this paragraph was inserted at the end of the form without affecting the form field values!<p>');

<form id="parent">
  <input type="text" value="insert something after form"><br>
  <input type="text" value="without affecting the values"><br>
  <input type="text" value="in the form fields"><br>
</form>

edited Aug 14 '16 at 19:00

answered Aug 14 '16 at 18:04

Soviut

88,194
49
192
260

2

@Vohuman and the answer is no. That was the first line I wrote. – Soviut Aug 14 '16 at 18:12
@Vohuman the OP didn't ask about writing shortcut functions or show and sample code for a shortcut function they were trying to write. – Soviut Aug 14 '16 at 18:14
I was providing background and context for browser behaviour which lends context to *all* the insert and append methods. The OP's example may show them adding a "string", which I assume was for brevity, because right before that they say "add something to other element". – Soviut Aug 14 '16 at 18:40
I've updated my answer with the `insertAdjacentHTML` method since that seems to satisfy the OP's original requirements. – Soviut Aug 14 '16 at 18:55
That's a great suggestion. I was about to close the question as a duplicate of this [question](http://stackoverflow.com/questions/7327056/appending-html-string-to-the-dom). I'll remove my comments. – Ram Aug 14 '16 at 18:59
@Vohuman thanks for being persistent. I've also added a runnable code snippet to demonstrate. – Soviut Aug 14 '16 at 19:00

Append html(text) to element without affecting siblings?

1 Answers1