我试图将动态脚本添加到页面中，但它只是在DOM中显示为txt

I'm trying to add dynamic scripts into a page but its just showing as txt in DOM

本文关键字：DOM txt 显示 动态 脚本 添加      更新时间：2023-09-26

我使用JS遍历XML来为单页应用程序在DOM上创建元素，现在我想使用jQuery处理面板进度的逻辑。这是Javascript;

    /* XML Script for Screen Output */
    var xmldata = `<?xml version="1.0" encoding="utf-8" ?>
    <script classes="" title="Example Script" brand1="" script1="">
    <agent brand="Genius PPT" name="Test User" status="Demonstration">
    </agent>
    <panels number="8">
    <panel classes="col-xs-3 blue" forFrame="scriptSection" initial="show" name="Panel1"></panel>
    <panel classes="col-xs-3 white" forFrame="scriptSection" initial="hide" name="Panel2"></panel>
    <panel classes="col-xs-3 blue" forFrame="scriptSection" initial="hide" name="Panel3"></panel>
    <panel classes="col-xs-3 white" forFrame="scriptSection" initial="hide" name="Panel4"></panel>
    <panel classes="col-xs-4 blue" forFrame="scriptSection" initial="hide" name="Panel5"></panel>
    <panel classes="col-xs-4 white" forFrame="scriptSection" initial="hide" name="Panel6"></panel>
    <panel classes="col-xs-4 blue" forFrame="scriptSection" initial="hide" name="Panel7"></panel>
    <panel classes="col-xs-12 white" forFrame="scriptSection" initial="hide" name="Panel8"></panel>
    </panels>
    <elements>
    // Buttons
        <Button classes="btn-default col-xs-2 col-xs-offset-2 callControl" forFrame="callControl" id="transferCall" name="Transfer call" state=" ">
        </Button>
        <Button classes="btn-default col-xs-2 callControl" forFrame="callControl" id="holdCall" name="Place Call on hold" state=" ">
        </Button>
        <Button classes="btn-default col-xs-2 callControl" forFrame="callControl" id="EndCall" name="End call" state="">
        </Button>
        <Button classes="btn-default col-xs-2 callControl" forFrame="callControl" id="MakeNewCall" name="Make New Call" state="disabled">
        </Button>
        <Button classes="btn-success col-xs-2 col-xs-offset-2" id="ScriptSubmit" forFrame="ScriptSelectRow4" name="Select Script" state="">
        </Button>
        <Button classes="col-xs-1 col-xs-offset-10" forFrame="ScriptSelectRow5" id="ToLogin" name="Back" state="">
        </Button>
        <End></End>
    </elements>
</script>`;
/* DOM Parsing*/
var parser0 = new DOMParser();
var xmlDoc = parser0.parseFromString(xmldata, "text/xml");
var tags =xmlDoc.getElementsByTagName('*');
$(document).ready(function() {
    for (var i="0"; i <tags.length; i++){
        switch (tags[i].nodeName){
        case "panels":
            break;
        case "panel":
            addPanel(tags[i].getAttribute("classes"), tags[i].getAttribute("forFrame"), tags[i].getAttribute("initial"), tags[i].getAttribute("name"));
            break;
        }
    }
});
function addPanel(classes, forFrame, initial, name){
    var a = '<section class="'+ classes + '" id ="' + name + 'Panel"><h2 class="text-center">' + name + '</h2><p id="' + name + 'Row1"></p><p id="' + name + 'Row2"></p><p id="' + name + 'Row3"></p></section>';
    var b = '#' + forFrame;
    var c = 'start' + name + initial;
    var d = '<script id ="' + c + '"></script>';
    var e = 'function ' + c + '(){';
    var f = '$("' + name + 'Panel").' + initial + '();}';
    $(b).append(a);
    $(b).append(d);//fine
    $(d).append(e);//inside script
    $(d).append(f);//inside script
    $(d).append(c);//inside/script
 console.log(e + f + ' should be inside the script with id ' + d);
}

/*硬编码脚本来验证代码的正确性*/

<!DOCTYPE html>
    <html lang=en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Logic Proof of concept with embedded XML</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
    <header class="row text-center">
    <h1>Example Page to prove Logic capability</h1>
    </header>
    <main class="row" id="scriptSection">
    </main>
    <footer class="row">
    <script src="javascript/jquery-3.1.0.min.js"></script>
    <script src="javascript/bootstrap.min.js"></script>
    <script src="javascript/logic.js"></script>
    </footer>
</body>
</html>

在加载页面时，我没有得到控制台错误或警告，但到目前为止，已经设法将函数放到脚本标签之外的页面上，或者在函数代码上面的代码消失。

谁能看出我错在哪里

我已经将xml添加到对象中，并且它的行为正确scriptXML = JSON.parse(message).XML;

相关文章：