用js如何修改如下div的内容?

<div id="a" > <div class="b"></div></div>如何用js修改b的内容?
2024-12-01 13:33:55
推荐回答(5个)
回答1:

用js如何修改div的内容的具体操作步骤如下:

1、首先在电脑的桌面上点击打开“html”应用程序,接着在此“html”应用程序中点击进行打开要进行操作的html文件。

2、打开此应用程序之后,接着在此文件的页面内点击进行创建“button按钮”,接着手动给此按钮设置一个id,在此将按钮的id设置为“show”,接着再在其中进行输入“”。



3、接着再在此应用程序中进行创建一个隐藏的div,然后再将需要进行修改的内容写到或者复制粘贴到此文件上,接着再为其设置id,在此设置为“hide”,然后再进行输入“

我是隐藏的div
”。



4、然后接着在此页面内的标签后面为id为hide设置其样式为“display:none”然后再输入“<style>#hide{display: none;padding-top: 15px;}</style>”,然后就修改完成了。</p> <p><br><br></p> <p><br><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F0dd7912397dda14407c9ed22bcb7d0a20df4865a%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/0dd7912397dda14407c9ed22bcb7d0a20df4865a"><br></p></p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答2:</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p><p>1、创建html文件,创建两个div,分别添加id。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F8644ebf81a4c510fe09cd1886e59252dd52aa5c3%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/8644ebf81a4c510fe09cd1886e59252dd52aa5c3"></p> <p>2、创建js脚本,获取div,并修改里面的内容。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2Fd439b6003af33a87ba39c98bc85c10385243b5cf%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/d439b6003af33a87ba39c98bc85c10385243b5cf"></p> <p>3、div里面的内容被修改。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F0b46f21fbe096b63c33868c202338744ebf8ac7a%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/0b46f21fbe096b63c33868c202338744ebf8ac7a"></p> <p>4、获取刚刚div设置字体颜色。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F574e9258d109b3de09dcd2fac2bf6c81810a4cc4%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/574e9258d109b3de09dcd2fac2bf6c81810a4cc4"></p> <p>5、然后通过js设置字体的大小。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F203fb80e7bec54e7594c2c8cb7389b504ec26afb%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/203fb80e7bec54e7594c2c8cb7389b504ec26afb"></p> <p>6、效果如图。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F8b82b9014a90f6038735aad53712b31bb151ed9f%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/8b82b9014a90f6038735aad53712b31bb151ed9f"></p></p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答3:</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p>在ie里面不支持getElementsByTagName()方法。<br>所以你只能这样<br>var o=document.getElementById("a").getElementsByTagName("div");<br>foreach(var i=0;i<o.length;i++){<br>if(o[i].className=="b"){<br> o[i].innerHTML="your str";<br>}<br>} <br><br>当然使用jquery框架就舒服多了<br>$("#a .b").html("your str");<br>搞定。</p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答4:</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p>如果用了jquery:<br> $("#a").find(".b").html("这里是修改后的内容!"); <br> // 结果:...<div class="b">这里是修改后的内容!</div>...<br><br>原生js控制:<br> document.getElementById("a").childNodes[0].innerHtml="这里是修改后的内容!"; <br> // 结果:...<div class="b">这里是修改后的内容!</div>...</p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答5:</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p>document.getElementById("a").childNodes[0].className="newb";</p> </div> </div> <div class="clear"></div> </div> </div> </div> <div class="wendaright"> <div class="wdluluerwema"> <div class="wdxgwttop">相关问答</div> <div class="wdxgwtnr"> </div> <div class="clear"></div> </div> <!-- 其他随机问答['id'=>alphaID($like['zid'])] --> <div class="wdluluerwema"> <div class="wdxgwttop">最新问答</div> <div class="wdxgwtnr"> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://aq8.net/index.php/1825173384182611588.html">联通乐享卡收到赠送的50元话费后,之前交的话费可以退吗?</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://aq8.net/index.php/746423923906158932.html">如何完全卸载Visual Studio 2010</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://aq8.net/index.php/120833100.html">GIANT 车把 把立 前叉</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://aq8.net/index.php/231083311.html">天大设计院 铁三院 天津市院 哪个好?建筑设计专业的</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://aq8.net/index.php/440170405.html">为什么我修改jsp页面后 必须重启tomcat才能进入页面?</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://aq8.net/index.php/368634206.html">西门子PLC s7300与增量编码器 的连接与应用????</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://aq8.net/index.php/291087381.html">梦幻西游化生寺好玩吗</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://aq8.net/index.php/173633569.html">急!请教高手,企业办厂需要哪些部门的审批手续???</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://aq8.net/index.php/219730601.html">把QQ相册里的照片弄到电脑屏幕怎么弄啊</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://aq8.net/index.php/322792364.html">求·电影《最爱》观后感一篇</a></div> </div> </div> </div> </div> <div class="clear"></div> <div class="footer"> <!-- 移动底部导航 --> <div class="fanhuitop"><a href="#top" ref="nofollow"><img src="https://aq8.net/static/old/img/fhtop.png" alt="返回顶部" title="返回顶部"></a></div> <div class="dibu"> <div class="dibu"> </div> </div> <div class="banquan"> <p>内容全部来源于网络收集,如有侵权,请联系网站删除:QQ:24596024</p> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?d86df1760ee607dc5bff1a7aab937e8e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>