如何使用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