如何使用JavaScript在ul标签中创建li li img标签？

Question

如何使用javascript在ul标签中创建li li img标签元素？

我要建立

<li id="123">
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Loading_bar.gif"/>
</li>

内

<ul id="placehere">

但是不行，我该怎么办？

https://jsfiddle.net/btz69dyk/2/

<body>
<script type="text/javascript">
window.onload=function(){

var elem = document.createElement("li");
elem.setAttribute("id", "123");

var elem = document.createElement("img");
elem.setAttribute("src", "https://upload.wikimedia.org/wikipedia/commons/5/53/Loading_bar.gif");
elem.setAttribute("height", "");
elem.setAttribute("width", "");
elem.setAttribute("alt", "Flower");
document.getElementById("placehere").appendChild(elem);
}
</script>
<ul id="placehere">
</ul>
</body>

Answer 1

问题是这四行

var elem = document.createElement("li");
elem.setAttribute("id", "123");

var elem = document.createElement("img");
elem.setAttribute("src", "https://upload.wikimedia.org/wikipedia/commons/5/53/Loading_bar.gif");

在这里，您将使用相同的变量名再次创建相同的elem元素，从而使li丢失

更改为

var elem1 = document.createElement("li");
elem1.setAttribute("id", "123");

var elem = document.createElement("img");
elem.setAttribute("src", "https://upload.wikimedia.org/wikipedia/commons/5/53/Loading_bar.gif");
elem.setAttribute("height", "");
elem.setAttribute("width", "");
elem.setAttribute("alt", "Flower");
document.getElementById("placehere").appendChild(elem1);
elem1.appendChild(elem);

Answer 2

首先将image元素附加到li元素，然后在ul元素中附加li元素。

在您的示例中，您正在同一变量（ elem ）中创建元素，因此第二个元素将覆盖先前创建的元素（变量将包含后面的元素）。 在DOM更新image元素之前将其添加到li元素中，只会对DOM结构造成一次麻烦。

尝试这个：

 window.onload = function() { var li_elem = document.createElement("li"); li_elem.setAttribute("id", "123"); var img_elem = document.createElement("img"); img_elem.setAttribute("src", "https://upload.wikimedia.org/wikipedia/commons/5/53/Loading_bar.gif"); img_elem.setAttribute("height", ""); img_elem.setAttribute("width", ""); img_elem.setAttribute("alt", "Flower"); li_elem.appendChild(img_elem); document.getElementById("placehere").appendChild(li_elem); }

 <ul id="placehere"> </ul>

在这里摆弄

Answer 3

 var listEle = document.createElement("li"); listEle.setAttribute("id", "123"); var elem = document.createElement("img"); elem.setAttribute("src", "https://upload.wikimedia.org/wikipedia/commons/5/53/Loading_bar.gif"); elem.setAttribute("height", ""); elem.setAttribute("width", ""); elem.setAttribute("alt", "Flower"); document.getElementById("placehere").appendChild(listEle).appendChild(elem);

如何使用JavaScript在ul标签中创建li li img标签？

问题描述

3 个解决方案

解决方案1
2 已采纳 2016-01-27 05:35:57

解决方案2
2 2016-01-27 05:42:16

解决方案3
1 2016-01-27 05:39:33

如何使用JavaScript在ul标签中创建li li img标签？

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-01-27 05:35:57

解决方案2 2 2016-01-27 05:42:16

解决方案3 1 2016-01-27 05:39:33

解决方案1
2 已采纳 2016-01-27 05:35:57

解决方案2
2 2016-01-27 05:42:16

解决方案3
1 2016-01-27 05:39:33