css - 如何用JavaScript插入HTML元素/元素内容/元素属性？-PHP中文网问答

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

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

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

</html>
<!-- 我以后一定要写从作品入门的编程书籍 -->

全部回复(4)

大家讲道理2017-04-11 10:50:13 4楼

不明白什么意思？DOM操作，innerHTML，setAttribute等？

赞 +0

添加回复

ringa_lee2017-04-11 10:50:13 3楼

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

高洛峰2017-04-11 10:50:13 2楼

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

黄舟2017-04-11 10:50:13 1楼

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

var op=document.getElementById('box');
op.appendChild(你要插入的element)