开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用document.getElementById('').innerHTML打印出数组会忽略HTML和CSS

使用document.getElementById('').innerHTML打印出数组时，会将数组的内容作为纯文本输出，忽略其中的HTML和CSS代码。这是因为innerHTML属性会将文本作为HTML解析并渲染，而不会将其作为原始文本输出。

如果想要在HTML页面中正确显示数组的内容，可以使用其他方法来处理。例如，可以使用循环遍历数组的每个元素，并将其添加到HTML元素中，或者使用JSON.stringify()方法将数组转换为字符串后再输出。

以下是一个示例代码，展示了如何将数组的内容正确显示在HTML页面中：

<!DOCTYPE html>
<html>
<head>
  <title>Print Array with HTML and CSS</title>
  <style>
    .array-item {
      color: blue;
    }
  </style>
</head>
<body>
  <div id="array-container"></div>

  <script>
    var array = [1, 2, 3, 4, 5];
    var arrayContainer = document.getElementById('array-container');

    for (var i = 0; i < array.length; i++) {
      var arrayItem = document.createElement('span');
      arrayItem.className = 'array-item';
      arrayItem.textContent = array[i];
      arrayContainer.appendChild(arrayItem);
    }
  </script>
</body>
</html>

在上述示例中，我们创建了一个包含id为"array-container"的div元素，然后使用JavaScript动态创建了span元素来表示数组的每个元素。通过设置span元素的textContent属性，我们将数组元素的值添加到span元素中。最后，将span元素添加到div元素中，从而在HTML页面中正确显示数组的内容。

请注意，上述示例中的CSS样式是可选的，用于演示如何应用CSS样式来美化数组元素的显示效果。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Web-第三天 JavaScript学习【悟空教程】

用户在提交表单时，需要对用户的填写的数据进行校验。本案例只对用户名、密码、确认密码和邮箱进行校验。

01

javascript之DOM操作

http://www.cnblogs.com/kissdodog/archive/2012/12/25/2833213.html

02

属性元素的内容创建，插入和删除节点虚拟节点

表示HTML文档元素的HTMLElement对象定义了读/写属性。映射了元素的HTML属性。HTMLElement定义了通用的HTTP属性。以及事件处理程序的属性。特定的Element子类型为其元素定义了特定的属性。

03

JavaScript学习笔记

【如果大家对程序员，web前端感兴趣，想要学习的，关注一下小编吧。加群：731771211。免费赠送web前端系统的学习资料！！前端学习必备公众号ID：mtbcxx】

02

【叔小生】JavaScript进阶篇

如何插入JS JS基础语法语法、函数、方法提取字符串substring() substring() 方法用于提取字符串中介于两个指定下标之间的字符。

03

HTML DOM(二)：节点的增删改查

上一篇：HTML DOM(一) 上一篇讲述了DOM的基本知识，从其得知，在DOM眼中，HTML的每个成分都可以看作是节点(文档节点、元素节点、文本节点、属性节点、注释节点，

00

jQuery的使用

1.需求分析在首页中(logo的上方)显示一个广告图片(页面加载后，间隔3秒弹出广告图片，再间隔3秒后隐藏广告图片)。【使用jQuery实现】

03

DOM操作

1.概述 1.1DOM DOM是JavaScript操作网页的接口，全称为“文档对象模型”（Document Object Model）。文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理

06

第85节：Java中的JavaScript

后代选择器：选择器1 选择器2 子元素选择器：选择器1 > 选择器2 选择器分组：选择器1，选择器2，选择器3{} 属性选择器：选择器[属性名称='属性值']

02

系统学习javaweb-06-javascript

parseFloat() 整数字符串仍转换为整数 IsNaN (is not a muber)不是数字返回true，是数字返回false

01

JavaScript 学习总结

Java和Javascript的区别就像印度和印度尼西亚的区别，名字中有点相同的东西。

04

[Java面试九]脚本语言知识总结.

核心内容概述 1.JavaScript加强，涉及到ECMAScript语法、BOM对象、DOM对象以及事件。 2.Ajax传统编程。 3.jQuery框架，九种选择器为核心学习内容 4.JQuery UI插件 5.jQuery Ajax编程 6.jQuery第三方插件 7.反向Ajax编程(彗星) 一、JavaScript基础加强 JavaScript是在浏览器内容运行，无需编译、解释执行动态脚本语言，是一种弱类型语言，所有变量使用var定义。 JavaScript的3个组成部分分别为：核心(ECMAScr

前端学习之JavaScript

尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

03

JavaScript基础

一 JavaScript的基础 1.1 JS的引入方式 1 直接编写 <script> alert('hello yuan') </script> 2 导入文件 <script src="hello.js"></script> 1.2 JS的变量、常量和标识符 1.2.1 JS的变量 1 2 3 x=5 y=6 z=x+y 在代数中，我们使用字母（比如 x）来保存值（比如 5）。通过上面的表达式 z=x+y，我们能够计算出 z

09

添加标签——给定标签选项

haveTags

addTags

6 <button id="btn">返回的数组</button> CSS： 1 #havetags span, 2 #addtags span { 3 display: inline-block; 4 padding:

04

JS魔法堂：被玩坏的innerHTML、innerText、textContent和value属性

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　由于innerText并非W3C标准属性，因此我们无法在FireFox中使用它(修正：FF45+已经支持innerText属性)，一般情况下我们可以使用textContent来代替，但它两者是否就能完全等同呢？在坑爹的表单元素（如input、textarea等）中表现是否依旧诡异呢？文本将记录一些实验结果，避免日后被玩坏。二、innerHTML　　　　　　　　　　　　　　　　　　　　　　　　　　由于innerText和text

07

JavaScript 代码分析

#div1 {width:100px; height:100px; background:red; position:absolute; }

02

如何将HTML字符转换为DOM节点并动态添加到文档中

将字符串动态转换为DOM节点，在开发中经常遇到，尤其在模板引擎中更是不可或缺的技术。字符串转换为DOM节点本身并不难，本篇文章主要涉及两个主题：

02

Web性能优化系列：10个JavaScript性能提升的技巧

Nicholas Zakas是一位 JS 大师，Yahoo! 首页的前端主程。他是《高性能 Javascript》的作者，这本书值得每个程序员去阅读。

02

JS设置标签的内容和样式

上一期堡堡给大家分享了操作符与数据类型转换。掌握JS操作符的目的是为了能够灵活的操作变量，以便完成JS的各种逻辑处理；掌握数据类型转换可以让我们避免一些不该发生的问题，能够让我们更好的完成JS的各种功能。如果想具体了解操作符与数据类型转换，可以查看：操作符与数据类型转换。而今天我们主要讲解JS逻辑和DOM的结合 - JS设置标签的内容和样式。 Tips：由于上一期的文章篇幅过长，微信的文章有字数要求，所以小编把部分的内容（操作符）放到这一期进行讲解。继上一期的内容 - 操作符赋值操作符：=(赋值) +

09

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭