在变量内存储html代码然后对其进行分屏时出现问题

时间:2019-06-24 02:55:23

标签: javascript

我收到此错误:

Node.appendChild的参数1不是对象

当我尝试这样做时:

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>

你能帮我一下吗?谢谢。

1 个答案:

答案 0 :(得分:1)

appendChild仅接受DOM节点作为参数,这是创建虚拟元素的最快解决方法:

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

或使用诸如此类的答案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);