Javascript createElement, add html element and simple text

Question

I am trying to create this html block in javascript:

<label>
  <input name="{{ $amenity->name }}" type="checkbox" class="minimal">
  text
</label>

I have:

var checkBox = document.createElement("input");
var label_input = document.createElement("label");
label_input.innerHTML = value.name;
label_input.appendChild(checkBox);

But the result is

<label>
  text
  <input name="{{ $amenity->name }}" type="checkbox" class="minimal">
</label>

and I tried to add the checkbox first and then the text but no success.

It’s probably a duplicate of How to append data to div using javascript? (see the answer by Chandu). — Sebastian Simon
– Sebastian Simon, Commented Apr 19, 2016 at 16:12

jeffjenx · Accepted Answer · 2016-04-19 16:09:52Z

8

Try using document.createTextNode for appending text content to the end of the label.

var checkBox = document.createElement("input");
var label_input = document.createElement("label");
label_input.appendChild(checkBox);
label_input.appendChild(document.createTextNode(value.name));

edited Apr 19, 2016 at 16:09

answered Apr 19, 2016 at 16:07

jeffjenx

17.6k6 gold badges63 silver badges104 bronze badges

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

Collectives™ on Stack Overflow

Javascript createElement, add html element and simple text

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related