Javascript 在div中加载脚本标记

我动态加载了一个带有

div id=“example”

的页面。因此，只执行id的内容。我在div中还有一个脚本标记，它没有被执行。我尝试过使用eval，但失败了

<div id="example">
    <script>
        alert("Welcome");
    </script>
</div>

连接下面的plunker链接

---

您可以等待元素的存在来运行脚本，这是一种比在元素内部运行JS更好、更受欢迎的解决方案

if(document.querySelector('.my_selector')){
   doStuff();
}

如果您是通过友好方式添加元素，那么就可以执行所需的代码

document.body.append('<div class="my_selector></div>"');
doStuff();

---

有无数更好的方法可以做到这一点，但请避免你目前正在做的事情。

你为什么要做这样可怕的事情？您可以等待添加元素，但这是不可能的，不应该添加html和JScombined@Sindhu-您是说您正在动态地将

…

添加到页面中，而脚本没有被执行吗？你能分享一下它是如何被动态加载的吗？它的

getElementsByTagName

（注意元素上的s）可能是重复的，而不是单数的。此外，它还返回一个类似数组的结构，而不是单个对象，因此使用它是错误的。正如Joseph指出的，为了安全起见，浏览器不会执行通过innerHTML插入脚本reasons@Joseph我使用Jquery示例$（'#abc'）.load（“/home/Example.html#Example）；当我单击选项卡时，我有一个选项卡，它会将div加载到另一个页面中。由于脚本不在div中，因此不会执行。类似于此，在这种情况下，您可以等待单击，然后执行所需的代码，我将展开我的答案以说明此行为。不必准备文档，将其包装在函数中并调用正如我在上一个示例中向您展示的那样，该函数带有addeventlistener，这样它将运行click eventlink_元素中的代码，而不显示脚本标记。我已经附加了plunker链接，正如我告诉您的，从另一个页面加载脚本是危险的，超出了标准，这是一个正确的实现

document.body.append('<div class="my_selector></div>"');
doStuff();

let adding_element = new Promise((resolve, reject)=>{
  if(!document.querySelector('.my_selector')){
   setTimeOut(resolve('.my_selector'),1000);
}
});

adding_element.then(selector => {
  document.body.append(`<div class="${selector}"></div>"`);
  doStuff();
});

let link_element = document.querySelector('.my_selector');

function doSomething(){
  //some code
}

link_element.addEventListener('click', doSomething);