Question

我在为每个img添加类时遇到问题，p没有为每个图像显示任何内容。这是我的代码......

var list = [
    {
        id: 1,
        title: "Dope",
        img: "pic/dope.jpg",
        link: "dope.html"
    },
    {
        id: 2,
        title: "The Do Over",
        img: "pic/The_Do-Over.png",
        link: "The_Do-Over.html"
    },
    {
        id: 3,
        title: "Deadpool",
        img: "pic/Deadpool.jpg",
        link: "Deadpool.html"
    },
    {
        id: 4,
        title: "Johnny English Reborn",
        img: "pic/johnny_english_reborn.jpg",
        link: "johnny_english_reborn.html"
    }
];

var input = document.getElementById("input");

function createList() {

    var ul = document.createElement('ul');

    for (var i = 0; i <list.length; i++) {


        //create li
        var li = document.createElement('li');
        li.id = list[i].id;

        //create paragraph -------------- doesnt desplay anything--problem
        var p = document.createElement('p');
        p.title = list[i].title;
        li.appendChild(p);

        //create image
        var img = document.createElement("img");
        img.src = list[i].img;
        img.title = list[i].title;

        //adding class
        img.class = "image";

        //create href
        var a = document.createElement("a");
        a.href = list[i].link;    
        a.appendChild(img);
        li.appendChild(a);

        //append this li to the ul
        ul.appendChild(li);

    }

    //outside the loop, append once the ul to the wrapper
    input.appendChild(ul);
    console.log(ul);


};

createList();

Answer 1

在普通javascript中，使用属性 className

添加类名

像这样添加类

img.className = "image";

我在这里更新了jsfiddle：https://jsfiddle.net/6bomaqo1/1/

Answer 2

您好请查看链接https://plnkr.co/edit/wjlaazFaF1F23a6WJlN2?p=preview

一旦创建了html，那么只有你必须在创建dom之前调用该函数，如果你通过id获取elemnt它不会附加，并且我添加了类名，请检查

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <input id="input" />
    <div id="newid" > </div>
      <script>

    var list = [
    {
        id: 1,
        title: "Dope",
        img: "http://jsfiddle.net/img/logo.png",
        link: "dope.html"
    },
    {
        id: 2,
        title: "The Do Over",
        img: "http://jsfiddle.net/img/logo.png",
        link: "The_Do-Over.html"
    },
    {
        id: 3,
        title: "Deadpool",
        img: "http://jsfiddle.net/img/logo.png",
        link: "Deadpool.html"
    },
    {
        id: 4,
        title: "Johnny English Reborn",
        img: "http://jsfiddle.net/img/logo.png",
        link: "johnny_english_reborn.html"
    }
];

var input = document.getElementById("input");

function createList() {

    var ul = document.createElement('ul');

    for (var i = 0; i <list.length; i++) {


        //create li
        var li = document.createElement('li');
        li.id = list[i].id;

        //create paragraph -------------- doesnt desplay anything--problem
        var p = document.createElement('p');
        p.title = list[i].title;
        p.innerHTML = list[i].title;
        li.appendChild(p);

        //create image
        var img = document.createElement("img");
        img.src = list[i].img;
        img.title = list[i].title;

        //adding class
        img.className = "newimage";

        //create href
        var a = document.createElement("a");
        a.href = list[i].link;    
        a.appendChild(img);
        li.appendChild(a);

        //append this li to the ul
        ul.appendChild(li);

    }

    //outside the loop, append once the ul to the wrapper
    console.log(ul);
   document.getElementById("newid").appendChild(ul);


};

createList();
    </script>
  </body>

</html>

JavaScript DOM - 如何向每个<img/>添加类并在每个immage上添加<p>

2 个答案: