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

如何使用javascript在ul标签中创建元素li img标签？如何使用javascript在ul标签中创建元素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>

来源

2016-01-27 mongmong seesee

问题是这4条线路

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");

在这里，你用相同的变量名称，以便li丢失

改变它

再次创建相同 elem元素

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);

来源

2016-01-27 05:35:57 gurvinder372

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);

来源

2016-01-27 05:39:33 saikumar

追加image元件li元件在ul元件第一然后追加li元件。

在你的例子中，你是在同一个变量（elem）中创建元素，因此第二个元素将覆盖早先创建的元素（变量将保存后面的元素）。附加image元素li元素DOM更新前，它会麻烦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>

Fiddle here

来源

2016-01-27 05:42:16 Rayon

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

回答

相关问题