Better ways of inserting simple HTML into a div using JavaScript

Question

I'm always seeming to have to insert HTML into a load of divs using jQuery, but I prefer JavaScrip and wonder if anybody has any better ways of doing it. See the typical example below:

let boxes = document.querySelectorAll('.main-editor-output');
for (let box of boxes) {
  console.log(box);
  $( "<p>Test</p>" ).prependTo(box);
}

.main-editor-output {
  border: 1px solid black;
  margin-top: 10px;
  min-height: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id='parent'>
  <div class="main-editor-output"></div>
  <div class="main-editor-output"></div>
</div>

Here I'm just using a simple line of jQuery to insert HTML into the test divs. I could do it using javascript, but that would require too many lines of code. Does anyone have any better ways of doing this?

Thanks for any ideas!

Codepen: https://codepen.io/ns91/pen/GRKGwZP

Use document.createElement and insertBefore

Sagar V
– Sagar V

2019-09-13 15:36:10 +00:00
Commented Sep 13, 2019 at 15:36 — Sagar V
– Sagar V, Commented Sep 13, 2019 at 15:36

zdolny · Accepted Answer · 2019-09-13 15:52:38Z

2

you can use insertAdjacentHTML https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

in your example it would be box.insertAdjacentHTML('afterbegin', '<p>Test</p>');

demo:

let boxes = document.querySelectorAll('.main-editor-output');

for (let box of boxes) {
  console.log(box);
  box.insertAdjacentHTML('afterbegin', '<p>Test</p>');
}

.main-editor-output {
  border: 1px solid black;
  margin-top: 10px;
  min-height: 1em;
}

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>


<div id='parent'>
  <div class="main-editor-output">
    Existing text
  </div>
  <div class="main-editor-output">

  </div>
</div>

edited Sep 13, 2019 at 15:52

answered Sep 13, 2019 at 15:42

zdolny

1,1191 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alessio Cantarella · Accepted Answer · 2019-09-13 15:50:40Z

2

In Vanilla JavaScript you can:

create an item with createElement
append it with appendChild
prepend it with insertBefore

For example, the following code will create two inputs, assign them an id and a value, then append the first and prepend the second inside a div with id container:

let container = document.getElementById('container');

let input1 = document.createElement('input');
input1.id = 'input1';
input1.value = 'I am input 1!';
container.appendChild(input1);

let input2 = document.createElement('input');
input2.id = 'input2';
input2.value = 'I am input 2!';
container.insertBefore(input2, input1);

<div id="container"></div>

edited Sep 13, 2019 at 15:50

answered Sep 13, 2019 at 15:33

Alessio Cantarella

5,2413 gold badges31 silver badges37 bronze badges

2 Comments

Sagar V Over a year ago

OP uses prependTo, appendChild and prepend works differently. You can use insertBefore

Alessio Cantarella Over a year ago

@SagarV thanks, I have added this detail to my answer

SimonBoh · Accepted Answer · 2019-09-13 15:32:03Z

1

You can use $element.innerHTML, which is a native JavaScript property of elements.

It works similar to the jQuery element method $element.html().

<div id="test">Pre Text</div>
<script> document.querySelector('#test').innerHTML = 'Post Text'; </script>

answered Sep 13, 2019 at 15:32

SimonBoh

1179 bronze badges

2 Comments

Sagar V Over a year ago

This will replace whole html content of the div. OP uses prependTo not html

SimonBoh Over a year ago

In the provided example the main-editor-output elements do not have sub-elements nor real text content, so using innerHTML has basically the same effect like prependTo (and is even a better practice).

Francesco Simeoli · Accepted Answer · 2019-09-13 15:38:05Z

1

I don't know if it's exactly what you're looking for, but in any case you can use document.createElement to create the child element, and add it to the parent element using the prepend method:

let boxes = document.querySelectorAll('.main-editor-output');
for (let box of boxes) {
  console.log(box);
  let element = document.createElement("p");
  element.append("Test");
  box.prepend(element);
}

.main-editor-output {
  border: 1px solid black;
  margin-top: 10px;
  min-height: 1em;
}

<head>
 
</head>


<div id='parent'>
  <div class="main-editor-output">

  </div>
  <div class="main-editor-output">

  </div>
</div>

answered Sep 13, 2019 at 15:38

Francesco Simeoli

5415 silver badges20 bronze badges

Collectives™ on Stack Overflow

Better ways of inserting simple HTML into a div using JavaScript

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related