JS的script标签解析问题

js有关<JScript>里面的一大坑

在用 innerHtml 与 innerText 进行DOM操作时，请注意以下问题：

解析问题

innerHtml 里面的 html 标签可以被解析，eg：

p.innerHTML = "ABC <span style='color:red'>RED</span> XYZ";

显示结果为：

而 innerText、textContent 中的html标签是不会被解析出来的，会将其理解成为字符串。

更多见：
细述textContent 与 innerText、innerHTML 的区别

标签关系

接下来你将接触一个错误：

var p = document.getElementById('p');
p.innerHtml = '<script'+'>alert(123)</'+'script>';
p.innerHtml = '<script>alert(123)</'+'script>';
p.innerHtml = '<script>alert(123)</script>';
p.innerHtml =  '<script>alert(123)'+'</script>';

不管你怎么写，它都是无法执行的，其原因就在于你理解错误了，p表示的是一个id为p的p标签或者其他一些无法包含<script>的html标签，相信说到这儿，大家就应该知道了。

原因就是，你无法在那些元素标签中加入<script>，所以 innerHtml 也一样不能打破规则去实现这一功能。

源代码解觉方案可以用jQuery：

$(‘body’).append(‘<script’+‘>alert(123)</’+‘script>’);

其意思是将<script>迁移到body中去，因为body是可以装<script>的