网站制作是那个,asp用什么软件编写,网站开发 学习,搜索引擎优化管理实验报告目录
前言
文档流写入 把元素直接写入到文档流
注意编辑
注意
元素写入
注意
innerHTML
特点#xff1a;
设置内容
获取内容 innerText
特点#xff1a;
注意
相关代码 前言 在JavaScript中#xff0c;文档流写入是指将内容直接写入到DOM#xff08;文档对…目录
前言
文档流写入 把元素直接写入到文档流
注意编辑
注意
元素写入
注意
innerHTML
特点
设置内容
获取内容 innerText
特点
注意
相关代码 前言 在JavaScript中文档流写入是指将内容直接写入到DOM文档对象模型中的文档流中而元素写入则是通过创建新的元素节点并将其添加到DOM中。文档流写入和元素写入在JavaScript中发挥着至关重要的作用可以实现动态内容更新、页面生成、用户界面交互、样式修改以及灵活定制从而提升用户体验增强网页应用的交互性和灵活性。
文档流写入 把元素直接写入到文档流 把元素直接写入到文档流 使用 document.write(str) 注意 1.会把内容渲染到body 2.str可以是标签也可以是文本内容 3.后面写入的内容不会覆盖前面写入的内容 document.write(h1好想睡觉/h1)document.write(h1超级想睡觉/h1)document.write(阿巴阿巴)document.write(div classcell/divdiv classcell/divdiv classcell/div) 注意 文档流写入是一种相对简单的方式但性能方面可能不如创建和修改DOM元素节点。如果你只是插入少量的HTML代码或需要更精确地控制元素的创建和插入位置可以考虑使用元素写入的方式。 元素写入 元素写入是通过JavaScript中的DOM创建和修改方法来实现的它允许我们动态地创建新的元素节点并将其添加到DOM中的特定位置。通过元素写入我们可以更精确地控制元素的创建和插入位置。相比于文档流写入的方法元素写入更适用于动态生成和插入元素的场景尤其是在根据用户交互或其他条件动态生成内容时。另外元素写入的方式也可以用于修改已存在的元素。通过获取已有的元素引用我们可以使用DOM方法进行修改例如修改元素的属性、样式或内容。
注意 与文档流写入一样对于用户输入的内容我们也应该采取适当的编码和验证措施以防止安全风险。此外过多的DOM操作可能会影响性能因此在进行元素写入时应该注意合理使用避免无谓的操作。 innerHTML 他是dom元素的一个属性可以通过innerHTML 设置和获取元素的内容 特点 1.后写入的内容会覆盖之前写入的内容 2.可以写入标签也可以写入文本 设置内容 dom.innerHTML 内容 如果内容是html结构可以被渲染成html aa.innerHTML 为中华之崛起而读书 获取内容 dom.innerHTML 获取到了dom元素中的html结构 console.log(aa.innerHTML); let aa document.getElementById(aa)aa.innerHTML 为中华之崛起而读书aa.innerHTML 少年中国说 //aa.innerHTML aa.innerHTML 少年中国说aa.innerHTML h1兰亭集序/h1console.log(aa.innerHTML); innerText innerText 他是dom元素的一个属性可以通过innerText 设置和获取元素的文本内容 特点 1.后面写入的内容会覆盖前面写入的内容 2.设置的时候如若是 html结构html结构不会被渲染会原样写入 和innerHTML一样也可以设置和获取内容 注意 获取的结果 会 过滤掉标签名只会显示文本内容 let bb document.getElementById(bb)console.log(bb.innerHTML);bb.innerText h1周末吃顿好的/h1bb.innerText h1周末喝口西北风/h1console.log(bb.innerText); 相关代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title文档流写入和元素写入/titlestyle*{margin: 0;padding: 0;}.cell{height: 50px;background: pink;width:150px;margin: 10px;}.wp{width: 200px;height: 200px;background: pink;}/style
/head
bodydiv classwp idaa/divdiv classwp idbbh1中午吃啥/h1h2米饭/h2h2米粉/h2/div
/body
/html
script/*把元素直接写入到文档流 使用document.write(str)1.会把内容渲染到body2.str可以是标签也可以是文本内容3.后面写入的内容不会覆盖前面写入的内容*/document.write(h1好想睡觉/h1)document.write(h1超级想睡觉/h1)document.write(阿巴阿巴)document.write(div classcell/divdiv classcell/divdiv classcell/div)/*innerHTML 他是dom元素的一个属性可以通过innerHTML 设置和获取元素的内容特点1.后写入的内容会覆盖之前写入的内容2.可以写入标签也可以写入文本设置内容dom.innerHTML 内容 如果内容是html结构可以被渲染成html获取内容dom.innerHTML 获取到了dom元素中的html结构innerText 他是dom元素的一个属性可以通过innerText 设置和获取元素的文本内容特点1.后面写入的内容会覆盖前面写入的内容2.设置的时候如若是html结构html结构不会被渲染会原样写入和innerHTML一样也可以设置和获取内容注意 获取的结果 会 过滤掉标签名只会显示文本内容*/ let aa document.getElementById(aa)aa.innerHTML 为中华之崛起而读书aa.innerHTML 少年中国说 //aa.innerHTML aa.innerHTML 少年中国说aa.innerHTML h1兰亭集序/h1console.log(aa.innerHTML);let bb document.getElementById(bb)console.log(bb.innerHTML);bb.innerText h1周末吃顿好的/h1bb.innerText h1周末喝口西北风/h1console.log(bb.innerText);
/script
