我正在尝试使用 Javascript动态地将元素放入其他元素中而不刷新页面,它的AJAX部分工作且功能正常.但由于某些未知原因,我的代码会自动关闭.

这是代码片段,您可以看到它实际上并未关闭.但是在浏览器中运行代码之后它就会关闭

HTML

<div id="Events">

使用Javascript

Get = document.getElementById("Events");
Get.innerHTML = "<div class='large-6 columns Pages' id='Page" + PN + "' style='background-color: #" + i + i + i + ";'>";
Get.innerHTML = Get.innerHTML + "<div class='large-6 columns Pages' id='Page" + PN + "' style='display: none; background-color: #" + i + i + i + ";'>";

页面源上的结果是:

<div id="Page1" class="large-6 columns Pages" style="background-color: #000;"></div>
<div class="EventsClass"></div>

正如您所看到的,这是一个问题,因为我试图将元素放在元素中.但是我不能因为结束标签.

我已经搜索了几个小时,找不到解决方案,甚至找不到原因.
没有关闭标签,但它会自动关闭.有没有办法覆盖这个?还是绕过它?

解决方法

从 documentation:

The innerHTML property sets or returns the HTML content (inner HTML) of an element.

显然,此属性返回的内容必须是格式良好的HTML,并且肯定会由带有结束标记的浏览器呈现.

如果要在元素内使用元素并更新所需GET对象的HTML.只需从要添加的内容中创建一个普通的字符串变量,然后稍后对其进行清理,当您拥有所需的完整内容时,请使用以下内容更新.innerHTML:

//content is a variable that just holds the string representing the HTML Content

    var content = "<div class='large-6 columns Pages' id='Page" + PN + "' style='background-color: #" + i + i + i + ";'>";
    content += "<div class='large-6 columns Pages' id='Page" + PN + "' style='display: none; background-color: #" + i + i + i + ";'>";

    //close the divs or add more elements to the variable content

    Get.innerHTML = content; //At the end.

我希望这能让你开始朝着正确的方向前进.

Javascript – .innerHTML更改自动关闭标记的更多相关文章

  1. Angular中innerHTML标签的样式不起作用的原因解析

    这篇文章主要介绍了Angular中innerHTML标签的样式不起作用详解 ,本文给出了解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. JavaScript中innerHTML使用方法实例

    js中常常用到innerHTML,其作用就是获取到标签里面的内容,同时也可以为标签添加内容,下面这篇文章主要给大家介绍了关于JavaScript中innerHTML使用方法的相关资料,需要的朋友可以参考下

  3. getElementById().innerHTML与getElementById().value的区别

    这篇文章主要介绍了getElementById().innerHTML与getElementById().value的区别,因为经常有新手朋友问到,特整理一下,需要的朋友可以参考下

  4. InnerHtml和InnerText的区别分析

    InnerHtml和InnerText的区别分析小结

  5. innerHtml不呈现html标记

    我正在Angular中使用[ninnerHtml],我编写了一个函数来从数据中呈现表体在此处输入图像描述但它只是呈现没有和标记的数据内容。在此处输入图像描述我还控制台.log()值在此处输入图像描述那么,我该如何修复它?

  6. 基于innerHTML中的script广告实现代码[广告全部放在一个js里面] 原创

    基于innerHTML中的script广告实现代码 ,主要是为了统一管理广告,但因为innerHtml的script的一些问题不建议script的代码下面是一些测试。

  7. 正则表达式获取HTML标记innerHTML

    )*))改成了[\s\S]以适应多行C#调用代码:

  8. ajax异步刷新邂逅了你—innerHTML

    innerHTML这个属性做过ITOO项目的应该都不陌生,用来设置或获取位于对象起始和结束标签内的HTML。,经常利用它实现信息的动态显示。也就用到了innerHTML,效果就如上面的照片一样。下面便是innerHTML的一个小例子

  9. Ajax学习---responseText

    通过结合使用responseText和innerHTML,服务器就能“生产”或生成HTML内容,由浏览器使用innerHTML属性来“消费”或处理。下面的例子展示了一个搜索功能,这是使用XMLHttpRequest对象、其responseText属性和HTML元素的innerHTML属性实现的。innerHTML.htmlinnerHTML.xml使用responseText和innerHTML可以大大简化向页面增加动态内容的工作。可笑的是,IE是率先使用innerHTML的浏览器,但它的innerHTM

  10. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部