如何创建返回html的javascript函数

首先，感谢您阅读我的问题，并尝试帮助我，为我的英语道歉

我的想法是创建一个库，函数从index.html返回一个html。 例如，我在index.html中调用函数：

Video.generateFrame（“1”，controls，“video1”）

“1”是我的视频的id，控件是要显示的一系列选项，“video1”是div的id

我的问题是，我不知道如何返回html，嗯。。。当我执行javascript时，返回下一个错误：

未捕获的语法错误：意外的严格模式保留字

如何解决呢

var Video = (function () {

    'use strict';

    var publicAPIs= {};

    // public method
    publicAPIs.generateIframe = function(id, controls, target) {

        let src = generateSrc(id, controls);

        let iframe = '\n<div id=\'' + target + '\'>\n\t<iframe frameBorder="0" src=\'' + src + '\'>\n\t\t<p>Your browser not support iframes.</p>\n\t</iframe>\n</div>';
    };

    // private method
    var generateSrc = function(id, controls) {
        let urlServer = `http://example.com/panel?selectVideo=${id}`;

        (controls.video) ? urlServer += '&video=1' : urlServer+= '&video=0';
        (controls.stop) ? urlServer += '&stop=1' : urlServer+= '&stop=0';
        (controls.fullscreen) ? urlServer += '&fullscreen=1' : urlServer+= '&fullscreen=0';

        return urlServer;
    };

    return publicAPIs;

})();

var Video=（函数（）{
"严格使用",；
var publicAPIs={}；
//公共方法
publicapi.generateFrame=函数（id、控件、目标）{
设src=generateSrc（id，控件）；
让iframe='\n\n\t\n\t\t您的浏览器不支持iframe。
\n\t\n'；
};
//私有方法
var generateSrc=函数（id，控件）{
让urlServer=`http://example.com/panel?selectVideo=${id}`；
（controls.video）？urlServer+='&video=1'：urlServer+='&video=0'；
（controls.stop）？urlServer+='&stop=1'：urlServer+='&stop=0'；
（controls.fullscreen）？urlServer+='&fullscreen=1'：urlServer+='&fullscreen=0'；
返回URL服务器；
};
返回公共API；
})();

编辑：

对不起，变量是publicAPI。。。 我用div容器生成一个字符串，现在我想我应该附加到其他html组件上，父html组件

public

，

private

关键字是类方法和变量的访问修饰符。 但它并没有用JavaScript实现。但是，规范保留了它们以备将来使用

---

在严格模式下，不能使用保留关键字。因此，您收到了一个

SyntaxError

。删除strict模式的显式声明，或者将变量名更改为与缩进对应的其他名称

我解决了！我希望它是好的，或者如果你能给我一个更好的解决方案，我很感激

var Video = (function () {

    'use strict';

    var publicAPIs= {};

    // public method
    publicAPIs.generateIframe = function(id, controls, target) {

        let src = generateSrc(id, controls);

        appendToDiv(src, target);
    };

    // private method
    var appendToDiv = function(link, target) {
        var iframe = document.createElement('iframe');
        iframe.frameBorder = 0;
        iframe.width="500px";
        iframe.height="400px";
        iframe.id="iframe-" + target;
        iframe.setAttribute("src", link);
        document.getElementById(target).appendChild(iframe);
    };

    // private method
    var generateSrc = function(id, controls) {
        let urlServer = `http://example.com/panel?selectVideo=${id}`;

        (controls.video) ? urlServer += '&video=1' : urlServer+= '&video=0';
        (controls.stop) ? urlServer += '&stop=1' : urlServer+= '&stop=0';
        (controls.fullscreen) ? urlServer += '&fullscreen=1' : urlServer+= '&fullscreen=0';

        return urlServer;
    };

    return publicAPIs;

})();

---

符号

public

在严格模式下保留。不管怎样，您稍后会将其称为

publicapi

。您应该将HTML作为字符串返回，HTML格式在JavaScript

return中无效（…

这被称为JSX，在React中很流行。你需要一个transpiler才能返回它。你可以返回一个字符串，比如@Madmadi，或者返回一个你实际创建的DOM节点。更改并返回为字符串，现在我必须附加到html父组件？谢谢，我更改了保留字。但是代码是可写的很高兴听到。但是，你不应该像这样发布答案。对不起，我应该如何发布我的答案？而不是发布这些。你应该编辑问题本身，表明代码的编辑版本。啊，好的..对不起