JavaScript创建元素的方法（代码）-js教程-PHP中文网

JavaScript创建元素的方法（代码）

不言

发布： 2019-03-20 11:32:44

转载

2711人浏览过

本篇文章给大家带来的内容是关于javascript创建元素的方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1、动态创建元素一 document.write()

例如向页面中输出一个 li 标签

<pre class="html" name="code"><span style="font-size:12px;"><script>
  document.write("<li>123</li>");</script></span>

登录后复制

body标签中就会插入但是这种方法几乎不用，因为这回影响页面的布局，甚至会将页面原来的内容冲刷掉，从而只显示输出内容

2、动态创建元素二 innerHTML

立即学习“Java免费学习笔记（深入）”；

<span style="font-size:12px;"><body>
<div id="box"></div>
<script>
  var box = document.getElementById("box");
  box.innerHTML = "<p>这是p标签</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10982">
                            <img src="https://img.php.cn/upload/webcode/000/000/004/176455800251815.jpg" alt="MVM mall 网上购物系统">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10982">MVM mall 网上购物系统</a>
                            <p>采用 php+mysql 数据库方式运行的强大网上商店系统，执行效率高速度快，支持多语言，模板和代码分离，轻松创建属于自己的个性化用户界面 v3.5更新： 1).进一步静态化了活动商品. 2).提供了一些重要UFT-8转换文件 3).修复了除了网银在线支付其它支付显示错误的问题. 4).修改了LOGO广告管理,增加LOGO链接后主页LOGO路径错误的问题 5).修改了公告无法发布的问题,可能是打压</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="MVM mall 网上购物系统">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10982" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="MVM mall 网上购物系统">
                        </a>
                    </div>
                ";
</script>
</body></span>

登录后复制

div标签中就会插入一个p标签，并在在页面上输出“这是标签”，当需要添加的标签比较多的时候使用这种方式。

3、动态创建元素三 document.createElement()

<span style="font-size:12px;"><body>
<div id="div"></div>
<script>
  var divobj = document.getElementById("div"); var li = document.createElement("li"); //创建一个li标签 li.innerHTML = "123"; //给li标签赋值
divobj.appendChild(li); //将创建好的li标签追加到box标签中 </script> </body></span>

登录后复制

div标签下面就会创建了一个li标签，当需要动态创建的标签比较少的时候就使用这种方式

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目！

以上就是JavaScript创建元素的方法（代码）的详细内容，更多请关注php中文网其它相关文章！