如何用JavaScript插入HTML元素/元素内容/元素属性?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>载入图片</title>
    <link rel="stylesheet" type="text/css" href="css/css.css">
</head>

<body>
    <div id="tupian">
        <div class="l" rel='用JS添加属性'>
            <img src="img/如果我有1000张图.png">
            <p>如果我有1000张图</p>
        </div>
        <div class="yjcpSize J2">
            <img src="img/如果我有1000张图.png">
            <p>图片的名字还不一样</p>
        </div>
        <div class="yjcpSize J2">
            <img src="img/人们像我这样写手动添加图片还不累死.png">
            <p>人们像我这样写手动添加图片还不累死</p>
        </div>
        <div class="yjcpSize J2">
            <img src="img/如何用JS写.png">
            <p>如何用JS写</p>
        </div>
        <div class="yjcpSize J2">
            <img src="img/让JS添加DIV、img等标签还有属性.png">
            <p>让JS添加DIV、img等标签还有属性</p>
        </div>
        <div class="yjcpSize J2">
            <img src="img/需要大概怎么写代码?.png">
            <p>需要大概怎么写代码?</p>
        </div>
        <div class="yjcpSize J2">
            <img src="img/还能让CSS中的设置对JS添加的图片生效.png">
            <p>还能让CSS中的设置对JS添加的图片生效</p>
        </div>
    </div>
    <script type="text/javascript" src="js/js.js"></script>
</body>

</html>
<!-- 我以后一定要写从作品入门的编程书籍 -->
阅读 5.6k
4 个回答

不明白什么意思?DOM操作,innerHTML,setAttribute等?

真正业务场景下,不会让你手动写1000张图片的。都是从后台取得数据,然后通过js的方法(例如常见的appendChild方法)或者借助模板引擎动态渲染html。程序要解决的问题就是避免你重复劳动,否则要程序干嘛。
你现在要做的就是少想这些不着天际的问题,然后多看书。

分析你的代码发现代码重复率很高可以使用循环来创建你的div img p 标签 例如JavaScript中的var demo = document.createElement("div"); var img = document.createElement("img"):demo.appendChild("img");
不知道你的js学习的怎么样 如果可以的你可以通过我的提示就可以写出来的 加油!!

当然是获取这个最大的元素,也就是包着你需要插入的元素
比如:

var oDiv=document.getElementById('box');
oDiv.appendChild(你要插入的element)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题