开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用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样式来美化数组元素的显示效果。

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

有帮助

没帮助

相关·内容

4篇笔记搞定JavaScript----第四篇

JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。...(){ alert(123); } hello Js控制改变标签的html属性和css属性...对象.HTML 属性名 = 值 2) CSS属性设置 i. var ab = 对象.style.CSS属性名 ii....对象.style.CSS属性名 = 值 HTML CSS JS Width background-colr backgroundColor height margin-left marginLeft...innerHTML和value对比 innerHTML：所有在这个对象内的内容都是innerHTML的内容 value：一般情况input的时候都是value,双标签都需要用到innerHTML <!

4352 0

json我已经累了基础+实例3（原力计划）

核心：这种垃圾不用我说了把，兄弟们，看过前面自然会！！！ 1.3-JSON 对象-访问对象值你可以使用点号（.）来访问...myobj={ "xm":"黄菊华", "num":3, "ke":["html","css","js"] } myobj.ke[0] ="Html教程"; document.getElementById...("demo01").innerHTML =myobj.ke[0]; //核心;这种和之前一样把，只不过把{}变成了[],一样的啊老哥，我就不讲了，因为看过之前自然懂！！...","css","js"] } //myobj.ke[0] ="Html教程"; document.getElementById("demo01").innerHTML =myobj.ke

4624 0

JavaScript DOM基础

PS：IE中的所有DOM对象都是以COM对象的形式实现的，这意味着IE中的DOM可能会和其他浏览器有一定的差异。 1.节点加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。...属性值 style CSS内联样式属性值 className CSS元素的类 document.getElementById('box').id;//获取id document.getElementById...它和直接使用.属性获取属性值的方法有一定区别。...alert(box.innerHTML);//innerHTML和nodeValue第一个区别 PS：innerHTML和nodeValue第一个区别，就是取值的。...(nodes[i]); } return ret; } PS：上面的方法，采用的忽略空白文件节点的方法，把得到元素节点累加到数组里返回。

1.3K9 0

JavaScript 笔记总结（一）

JavaScript JavaScript web 开发人员必须学习的 3 门语言中的一门： HTML 定义了网页的内容 CSS 描述了网页的布局 JavaScript 网页的行为什么是javascript...脚本可同时位于 HTML 的和两个部分，通常的做法是把函数放入部分，或者放在页面底部。...这样就可以把它们放在同一处位置，不会干扰页面的内容 JavaScript 语法 JavaScript 有多种数据类型：数字，字符串，数组，对象…… 使用 **算术运算符** 来计算值使用**赋值运算符...("1")是使用 id 属性来查找 HTML 元素的 JavaScript 代码 //innerHTML = "Hello JavaScript!"...innerHTML 写入到 HTML 元素我的第一个段落我的第二个段落我的第三个段落 document.getElementById

9294 2

JSON基础入门实战讲解（）基础+实例2（原力计划的啊）

基础", "ke02":"CSS基础", "ke03":"JS基础" } }; document.getElementById("x01").innerHTML=ren.xing...; document.getElementById("m01").innerHTML=ren.ming; document.getElementById("k01").innerHTML=ren.kcheng.ke01...ke02数组啊 //你直接用数组也可以哈 ?...="text/html; charset=utf-8" /> 1.3-JSON 对象-访问对象值修改和删除...":"HTMl基础", "ke02":"CSS基础", "ke03":"JS基础" } }; ren2.kcheng.ke01="html";//重新赋值呀 delete

4171 0

js处理json和字符串示例

DOCTYPE html> function toLeft() { var list1 = document.getElementById...Demo4：比较两个字符串不同的元素并打印出来，其中两个字符串是包含关系，即一个字符串一定是另一个字符串的子串，如{1,2,4}是{1,2,3,4,5}的子串 <title...Demo5： hello #adddelTextId{ float: clean; } normal...+ addTextId.innerHTML; textareaId.innerHTML = adddelText; } 运行结果： ?...参考推荐： js 数组Array用法 26 个 jQuery使用技巧 Dynatree - Example Browser jquery-fileTree zTree js 将json与String

1.7K4 0

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

6 返回的数组 CSS： 1 #havetags span, 2 #addtags span...); 52 53 document.getElementById(addTagsId).innerHTML += "" + this.innerHTML...+ ""; 54 55 haveTags.splice(haveTags.indexOf(this.innerHTML), 1); // 从数组中删除该元素...); 82 83 document.getElementById(haveTagsId).innerHTML += "" + this.innerHTML...+ ""; 84 85 addTags.splice(addTags.indexOf(this.innerHTML), 1); // 从数组中删除该元素

8484 0

前端性能优化

之前写过一篇文章前端网络高级篇（六）网站性能优化，里面提到过13个性能优化的点：减少HTTP请求使用CDN 利用HTTP缓存 Gzip压缩将样式表放在顶部将JS脚本放在底部避免CSS表达式使用外部...JS和CSS 减少DNS查找压缩JavaScript和CSS 少用iframe JS文件异步/按需加载图片懒加载在具体编程方面，再补充几个点。...= content; 其实，JS里面用+号拼接String开销也略大，一般会建议创建数组，然后通过array.join('')将数组转为String，如： let array = []; for(let...事件节流（throttle）和防抖（debounce）比如窗口的scroll和resize事件，一旦激活，会频繁触发相应的事件函数。频繁触发回掉函数导致的大量计算有可能引发页面抖动甚至卡顿。...为了规避这些风险，我们会采用事件节流或者防抖，来降低函数的触发频率。节流：当事件第一次被触发时，在指定时间内，无论再次触发多少次，都会被忽略。也就是说，以第一次事件为准。

8893 0

JavaScript 学习-31.HTML DOM 修改 HTML 内容

前言通过 HTML DOM，JavaScript 能够访问 HTML 文档中的每个元素，并且可以修改这些元素的属性和文本值修改 HTML = 改变元素、属性、样式和事件修改 HTML 元素修改...HTML DOM 意味着许多不同的方面：改变 HTML 内容改变 CSS 样式改变 HTML 属性创建新的 HTML 元素删除已有的 HTML 元素改变事件（处理程序） innerHTML...; //修改第二个p标签文本值 document.getElementById('p2').innerHTML = 'world!'...元素的属性获取和设置 | 方法 | 描述 | | ———————————- | ——————————————— | | element.attributes | 返回一个元素的属性数组 | | element.getAttribute...样式通过修改元素的style 属性修改css样式 hello document.getElementById

1.9K1 0

JavaScript 学习（1）

."); // document.getElementById("aa").innerHTML = "O(∩_∩)O哈哈~"; if(isNaN(document.getElementById...document.getElementById("demo").innerHTML="My First JS Function.... // 输出 document.getElementById(id); // 来获得某个html元素的访问 innerHTML; // 获取或插入元素内容 // 写到控制台 console.log...").src = "landscape.jpg"; （3）CSS 改变HTML元素的样式 document.getElementById(id).style.property... // 使用HTML DOM 来分配事件 // HTML DOM 允许您使用JavaScript来向HTML元素分配事件。 Hello world!

7734 0

高性能JavaScript

从《高性能JavaScript》一书中的整理笔记： 1、将经常使用的对象成员、数组项、和域外变量存入局部变量原因：数据存储位置对大地代码整体性能会产生重要的影响，直接变量和局部变量的访问速度快于数组和对象成员...5、DOM操作量化问题： // 在循坏中更新页面，问题所在：每次循环都对DOM元素访问了两次 // 一次是读取document.getElementById('here').innerHTML的内容...7、遍历数组明显快于同样大小和内容的HTML集合 8、 for循环时，HTML某元素集合的长度不建议直接作为循环终止条件，最好将集合的长度赋给一个变量，然后使用变量作为循环终止条件；原因：当每次迭代过程访问集合的...整体修改cssText的css代码，而不是分开访问，修改cssText的属性 // 访问了4次DOM，第二次开始重排列并强迫渲染队列执行 var el = document.getElementById...因此强烈建议，在数据量很大的表格中，减少鼠标在表上移动效果，减少高亮行的显示，使用高亮是个慢速过程CPU使用率会提高到80%-90%，尽量避免使用这种效果。

6901 0

JS设置标签的内容和样式

上面提到了对象是具有属性和功能，那我们如何使用对象的属性或功能呢？...2 设置样式现在要对获取到的标签进行设置样式的操作，回顾之前学的HTML与CSS，给标签设置样式有几种方式？我们是不是使用CSS选择器、标签内联来控制标签的样式。...当然可以，我们可以使用innerHTML属性实现修改或获取标签中的内容。...把innerHTML属性拆开来理解，inner的意思是里面、内部的，HTML是开始和结束标签之间的 HTML，包括了标签和文本；合起来的意思是标签里面的内容（标签和文本）；例如：eleObj.innerHTML...= document.getElementById("h5course"); alert(con.innerHTML); 在IE、谷歌浏览器下测试，哪几个浏览器会正常显示？

20.3K9 0

JavaScript语法学习（一文带你学会JavaScript）

任何数据类型数据和字符串进行其他运算的时候，会先转化为数字，否则转化为Nan。..."; document.write(str.replace(/Microsoft/g, "W3School")); //g表示全局匹配，i表示忽略大小写 </html...= document.getElementById("div1"); oBtn.onclick = function(){ alert(oDiv.innerHTML); } oDiv.innerHTML...('div1'); alert(odiv.style.width) } */ /* 在Chrome中使用 window.onload = function(){ var odiv = document.getElementById...DOCTYPE html> html, body

6423 0

JS起步阶段随笔【JavaScript】

字符串语法规范 js中的字符串一般都用单引号控制台反馈结果当使用 console.log(); 返回值为 null：空对象（代码是从上往下执行的，定义的东西在下面，也会这样）若undefined...（数组的模样，但没有数组的方法），例如: var divs=getElementsBytagName('div'); for(var i=0;i<divs.length;i++) { var div...=divs[i]; console.log(div); } 原生JS获取标签内容 // by id document.getElementById("demo").innerHTML // by class...; 然而 onclick="this.innerHTML='Change'+'all'+'of'+'them';" 只能放到标签里用，this 要时刻紧靠着它自己的环境...document.write(“内容”+“”) 使用“”来实现换行使用 document.write() 方法可以将内容写到 HTML 文档中。

5202 0

Javascript 常用语法 Web前端基础

Javascript 和 HTML、CSS一样，是Web前端开发所必须的三个模块。...我跟之前总结HTML、CSS一样，同样是站在本科应用层的角度，重点是比较常用的语法搭配，其次是那些有花里胡哨的功能语法，省略那些可以被新功能所替代的旧方法。...HTML部分：点击这里 CSS部分：点击这里 ---- 第一部分：最常用的语法常用调试方法 alert('hello zwz');//弹框 console.log('hello zwz!')...;//调试窗口 document.getElementById('c').innerHTML = 'hello zwz';//覆盖输出到HTML元素 //不覆盖可以把= 改成 += 即可常用获取HTML...('d').innerHTML += i+''; } 数组的常用方法字符串常用方法配合HTML组件 //<!

1804 0

velocity渲染JS文件,file-node.js分析

// 浏览器读取这个URL后，会自动将print位置滚动至可视区域。...("markdown-editor").innerHTML=''; document.getElementById("image-panel").innerHTML =...代码，使用velocity模板渲染引擎： <!

6.5K0 0

关于后端代码的总结_辐射4最强防具代码

修改 HTML 内容和属性修改 HTML 元素的css HTML DOM 元素 (节点) 创建新的 HTML 元素替换 HTML 元素删除HTML元素表单验证表单验证意义与场景表单验证常用事件与属性...(“hello world”); 使用document.write()将内容写入到html文档使用innerHTML写入到html元素 JavaScript的注释 JavaScript注释与java...开头和结尾的空格是允许的。如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。在字符串以”0″为开始时旧的浏览器默认使用八进制基数。...内容和属性修改内容修改 HTML 内容的最简单的方法是使用 innerHTML 属性修改 HTML 元素的内容的语法: document.getElementById(id).innerHTML...修改 HTML 元素css的语法: document.getElementById(id).style.property=新样式 document.getElementById("myli").style.color

3.2K2 0

【java web 01】3小时快速学习前端知识(收藏备用)

，选择右下角的Go live会自动跑一个小型服务器，就可以很方便的看你的html解析效果喽。...> 3.2 CSS的三大选择器 3.2.1 元素选择器 3.2.2 标签选择器 id 选择器使用 HTML 元素的 id 属性来选择特定元素。...灵活的数组方法，基本和java类似。...fill() 使用一个固定值来填充数组。 filter() 检测数值元素，并返回符合条件所有元素的数组。 find() 返回符合传入测试（函数）条件的数组元素。...Msg.innerHTML = ""; return true; } // 表单提交时，校验用户名和密码格式 function checkForm(

1061 0

json基础+实例（4）

兄弟们，俺只讲核心哈就讲修改和删除把 //修改 myobj.ke[0]= "HTML教程" var i,x=""; for(i in myobj.ke) { x =...="text/html; charset=utf-8" /> JSON 数组04-对象中的数组-修改和删除...","css","js"] } document.getElementById("demo01").innerHTML =myobj.ke[0]+""; document.getElementById...("demo01").innerHTML = document.getElementById("demo01").innerHTML + myobj.ke[1]+""; document.getElementById...("demo01").innerHTML = document.getElementById("demo01").innerHTML + myobj.ke[2]+""; //修改 myobj.ke

3052 0

JavaScript基础

//编写js代码将代码编写到外部的js文件中，然后通过标签将其引入 script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略...) // box1中的div document.querySelectorAll()：根据CSS选择器去页面中查询一组元素，会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个 <div class...使用该属性可以获取或设置元素内部的HTML代码事件可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存...DOCTYPE html> <style type="text/<em>css</em>"...replace() 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面不会生成历史记录，不能使用回退按钮回退定时器 window.onload = function () {

1.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭