Problem storing a html code inside a variable and then appeding it

Question

I get this error:

Argument 1 of Node.appendChild is not an object

When I try to do this:

JS:

var selectVariable = '<select class="form-control" tabindex="4" name="regional" ng-model="query.regional ng-change="selectChange()">' +

         '<option class="content"  ng-repeat="regional in regionales" value="{{regional.name}}">  {{regional.name}}   </option>' + '<select>';

     setTimeout(() => {
         document.getElementById("aquiva").appendChild(selectVariable);
     }, 6000);

HTML:

<div id="aquiva"  ng-class="{ 'col-xs-12' : !query.regional, 'col-xs-11' : query.regional }"></div>

Can you lend me a hand? Thanks.

score 1 · Accepted Answer · answered Jun 24 '19 at 03:31

appendChild only accepts a DOM node as an argument, fastest workaround to create a dummy element:

var el = document.createElement('div');
el.innerHTML = '<select class="form-control" tabindex="4" name="regional" ng-model="query.regional ng-change="selectChange()"><option class="content"  ng-repeat="regional in regionales" value="{{regional.name}}">  {{regional.name}}   </option></select>'

var selectVariable = el.getElementsByTagName('select')[0];

 setTimeout(() => {
     document.getElementById("aquiva").appendChild(selectVariable);
 }, 1000);

or to user some kind of parsing like this answer https://stackoverflow.com/a/55046067/7451501

    const parse = Range.prototype.createContextualFragment.bind(document.createRange());
var selectVariable = parse('<select class="form-control" tabindex="4" name="regional" ng-model="query.regional ng-change="selectChange()"><option class="content"  ng-repeat="regional in regionales" value="{{regional.name}}">  {{regional.name}}   </option></select>')
setTimeout(() => {
         document.getElementById("aquiva").appendChild(selectVariable);
     }, 6000);

Problem storing a html code inside a variable and then appeding it

1 Answers1