Question

我有一个简单的ToDo应用，可以动态添加列表。当输入特定的字符串作为输入“ party”时，预期结果是将图像连接到输入字符串并显示图像。

我一直在尝试使用W3Schools.com和其他站点上找到的createElement的几个不同示例。我尝试指定图片的路径，以及为要连接的图片创建变量。当我使用console.log或console.dir时，路径看起来正确。该项目将添加到“待办事项”列表中，但是不会显示图像，并且控制台中不会出现任何错误。

   $(document).ready(function () {
    
    	$("#list-items").html(localStorage.getItem("listItems"));
    
     $(".add-items").submit(function (event) {
     event.preventDefault();
    
    
     var item = $("#todo-list-item").val();
    /* When "party" is entered, do the following. 
    // Use createElement to dynamically add a picture to the ToDo List. */
    
    if(item == "party") {  
      alert("Time to party")
      
      var caddyshack = document.createElement("img");
          caddyshack.setAttribute("src", "assets/images/caddyshack.gif");
          caddyshack.setAttribute("width", "333");
          caddyshack.setAttribute("height", "250");
          caddyshack.setAttribute("alt", "Party Animal");                  
          console.log(caddyshack);
          console.dir(caddyshack);    
          //$("#list-items").append("<li><input class='checkbox' type='checkbox'/>" +  caddyshack  "<a class='remove'>x</a><hr></li");
          $("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item +  "<a class='remove'>x</a><hr></li>") + "<img src=assets/images/caddyshack.gif' alt='Gopher' width='500' height='333'>"; 
            var x = document.getElementById("img");   
            function myFunction() {
              var x = document.getElementById("myImg").src;
                  document.getElementById("item").innerHTML = x;  
            }                                                                                                                                   
          console.log("img")
          $("#todo-list-item").val("");
       }  else if (item) {
          $("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");
        localStorage.setItem("listItems", $("#list-items").html());
        $("#todo-list-item").val(""); 
    } else {
        alert("You must enter an action"); 
    }
    });

 <script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>   
            <div class="container">
                <h1>Things I've Gotta Get Done</h1>
                <ul id="list-items">
                <!-- Here's where out todo list items will go! -->
                </ul>
                <form class="add-items">
                    <input type="text" class="form-control" id="todo-list-item" placeholder="What do you need to do today?">
                    <button class="add" type="submit">Add to List</button>
                </form>
            </div>

预期结果应显示该项目以及添加到网页的图像。正在添加单词，但图像没有添加。

Answer 1

在您共享的脚本中，问题似乎出在

$("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>")+ "<img src=assets/images/caddyshack.gif' alt='Gopher' width='500' height='333'>";

这是由于括号在此处</li>")+ "<img src之前放错了位置，函数括号在此处关闭，之后您试图连接img标记，这将在代码中产生错误。 / p>

  $(document).ready(function () {

$("#list-items").html(localStorage.getItem("listItems"));

$(".add-items").submit(function (event) {
  event.preventDefault();


  var item = $("#todo-list-item").val();
  /* When "party" is entered, do the following. 
  // Use createElement to dynamically add a picture to the ToDo List. */

  if (item == "party") {
    alert("Time to party")

    var caddyshack = document.createElement("img");
    caddyshack.setAttribute("src", "assets/images/caddyshack.gif");
    caddyshack.setAttribute("width", "333");
    caddyshack.setAttribute("height", "250");
    caddyshack.setAttribute("alt", "Party Animal");
    console.log(caddyshack);
    console.dir(caddyshack);
    //$("#list-items").append("<li><input class='checkbox' type='checkbox'/>" +  caddyshack  "<a class='remove'>x</a><hr></li");
    $("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>" + "<img src=assets/images/caddyshack.gif' alt='Gopher' width='500' height='333'>");
    var x = document.getElementById("img");

    function myFunction() {
      var x = document.getElementById("myImg").src;
      document.getElementById("item").innerHTML = x;
    }
    console.log("img")
    $("#todo-list-item").val("");
  } else if (item) {
    $("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");
    localStorage.setItem("listItems", $("#list-items").html());
    $("#todo-list-item").val("");
  } else {
    alert("You must enter an action");
  }
});
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="container">
    <h1>Things I've Gotta Get Done</h1>
    <ul id="list-items">
    <!-- Here's where out todo list items will go! -->
    </ul>
    <form class="add-items">
        <input type="text" class="form-control" id="todo-list-item" placeholder="What do you need to do today?">
        <button class="add" type="submit">Add to List</button>
    </form>
</div>

Answer 2

该脚本中发生了很多事情，看起来很多余。这是将原生document.createElement与Node.appendChild结合使用以向DOM添加内容的示例。

$(document).ready(function () {

    //$("#list-items").html(localStorage.getItem("listItems"));

	 $(".add-items").submit(function (event) {
	 event.preventDefault();


	 var item = $("#todo-list-item").val();
	/* When "party" is entered, do the following. 
	// Use createElement to dynamically add a picture to the ToDo List. */

		if(item == "party") {  
			alert("Time to party")
			const image = document.createElement("img")
			image.src = "https://i.stack.imgur.com/6JCJ4.jpg?s=48&g=1"
			image.setAttribute("width", "100");
			image.setAttribute("height", "50");
      const li = document.createElement("li")
      li.innerHTML = "<input class='checkbox' type='checkbox'/>" + item +  "<a class='remove'>x</a><hr></li>"
      li.appendChild(image)
			$("#list-items").append(li);
			

			$("#todo-list-item").val("");
		}  else if (item) {
			$("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");
			//localStorage.setItem("listItems", $("#list-items").html());
			$("#todo-list-item").val(""); 
		} else {
			alert("You must enter an action"); 
		}
	})
})

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Simple Todo List</title>
        <!-- CSS -->
        <link rel="stylesheet" href="styles.css">
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <div class="container">
            <h1>Things I've Gotta Get Done</h1>
            <ul id="list-items">
            <!-- Here's where out todo list items will go! -->
            </ul>
            <form class="add-items">
                <input type="text" class="form-control" id="todo-list-item" placeholder="What do you need to do today?">
                <button class="add" type="submit">Add to List</button>
            </form>
        </div>

    </body>
</html>

使用createElement后无法显示图像

2 个答案: